|
<div class="flex bg-black/95 text-gray-300/90"> |
|
<div class="w-64"> |
|
<button class="text-white p-4 border border-white">New chat</button> |
|
</div> |
|
<div class="relative flex-1 overflow-y-auto"> |
|
<div class="mx-auto flex h-screen max-h-screen max-w-4xl flex-col gap-8 pt-12"> |
|
<div class="flex items-start justify-start gap-4 leading-relaxed"> |
|
<img |
|
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" |
|
class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40" |
|
/> |
|
<div |
|
class="text-blue-00 group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5" |
|
> |
|
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet |
|
consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, |
|
dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet consectetur |
|
adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit |
|
amet consectetur adipisicing elit. Dolorum maiores quo officiis? |
|
</div> |
|
</div> |
|
<div class="mb-2 flex items-start justify-start gap-4 text-gray-300/70"> |
|
<div class="mt-4 h-4 w-4 flex-none rounded-full" /> |
|
<div class="rounded-2xl px-4 py-3.5"> |
|
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet |
|
consectetur adipisicing eLorem ipsum |
|
</div> |
|
</div> |
|
<div class="flex items-start justify-start gap-4 leading-relaxed"> |
|
<img |
|
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" |
|
class="mt-5 h-3 w-3 flex-none rounded-full bg-white" |
|
/> |
|
<div |
|
class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5" |
|
> |
|
<p> |
|
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet |
|
consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem |
|
ipsum, dolor sit |
|
</p> |
|
<div class="mt-4 flex flex-wrap gap-4 first:mt-0"> |
|
<img |
|
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d" |
|
alt="" |
|
class="max-h-[360px] rounded-xl" |
|
/> |
|
<img |
|
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7" |
|
alt="" |
|
class="max-h-[360px] rounded-xl" |
|
/> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="flex items-start justify-start gap-4 leading-relaxed"> |
|
<img |
|
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" |
|
class="mt-5 h-3 w-3 flex-none rounded-full bg-white" |
|
/> |
|
<div |
|
class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5" |
|
> |
|
<p> |
|
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet |
|
consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem |
|
ipsum, dolor sit |
|
</p> |
|
<div class="mt-4 flex flex-wrap gap-4 first:mt-0"> |
|
<img |
|
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d" |
|
alt="" |
|
class="max-h-[360px] rounded-xl" |
|
/> |
|
<img |
|
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7" |
|
alt="" |
|
class="max-h-[360px] rounded-xl" |
|
/> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="flex items-start justify-start gap-4 leading-relaxed"> |
|
<img |
|
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" |
|
class="mt-5 h-3 w-3 flex-none rounded-full bg-white" |
|
/> |
|
<div |
|
class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5" |
|
> |
|
<p> |
|
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet |
|
consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem |
|
ipsum, dolor sit |
|
</p> |
|
<div class="mt-4 flex flex-wrap gap-4 first:mt-0"> |
|
<img |
|
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d" |
|
alt="" |
|
class="max-h-[360px] rounded-xl" |
|
/> |
|
<img |
|
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7" |
|
alt="" |
|
class="max-h-[360px] rounded-xl" |
|
/> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="flex items-start justify-start gap-4 text-gray-300"> |
|
<div class="mt-4 h-4 w-4 flex-none rounded-full" /> |
|
<div class="rounded-2xl px-4 py-3.5"> |
|
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet |
|
consectetur adipisicing eLorem ipsum |
|
</div> |
|
</div> |
|
<div class="flex items-start justify-start gap-4 leading-relaxed"> |
|
<img |
|
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" |
|
class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40" |
|
/> |
|
<div |
|
class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5 text-blue-900" |
|
> |
|
<div class="h-4 w-2 animate-pulse bg-white/20" /> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="fixed inset-x-0 bottom-12 mx-auto max-w-4xl"> |
|
<div |
|
class="w-full rounded-2xl border border-black bg-gradient-to-br from-gray-800/40 to-gray-800/50 px-4 py-3.5 shadow-2xl shadow-white/5 outline-none ring-gray-700 focus:ring-1" |
|
role="textbox" |
|
contenteditable |
|
> |
|
Ask anything... |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|