All Prompts
All Prompts
chatmessaginglayoutthreadtailwinddarkresponsiveui
Dark Themed Chat Application Layout
Темный макет приложения чата в стиле Slack. UI с навигацией, заголовком, списком сообщений и полем ввода. Адаптивный дизайн для командного общения.
Prompt
<div class="flex xl:py-40 w-screen h-1000 pt-40 pb-40 items-center justify-center"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(2)">
<div
class="flex flex-col overflow-hidden xl:bg-neutral-900/20 bg-neutral-900 w-full h-full max-w-6xl max-h-[95vh] border-neutral-800 border rounded-xl shadow-2xl backdrop-blur-xl"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1)">
<!-- Mac Title Bar -->
<div class="flex border-neutral-700/50 border-b pt-3 pr-4 pb-3 pl-4 backdrop-blur items-center justify-between"
style="background: rgba(40, 40, 40, 0.5);"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)">
<div class="flex items-center gap-2">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full" style="background: #505050;"></div>
<div class="w-3 h-3 rounded-full" style="background: #606060;"></div>
<div class="w-3 h-3 rounded-full" style="background: #707070;"></div>
</div>
</div>
<div class="flex items-center gap-2">
<button class="p-1 rounded hover:bg-neutral-700/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-400"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
</div>
<!-- App Content -->
<div class="flex-1 flex overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 border-r border-neutral-800/50 flex flex-col" style="background: rgba(30, 30, 30, 0.8);">
<!-- Search -->
<div class="p-3 border-b border-neutral-800/50">
<div class="flex items-center gap-2 rounded-lg px-3 py-2 text-neutral-300"
style="background: rgba(50, 50, 50, 0.6);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 text-neutral-400">
<path d="m21 21-4.34-4.34" class=""></path>
<circle cx="11" cy="11" r="8" class=""></circle>
</svg>
<input placeholder="Search" class="w-full bg-transparent text-sm placeholder-neutral-500 focus:outline-none">
</div>
</div>
<!-- Navigation -->
<nav class="flex-1 overflow-y-auto">
<div class="px-3 pt-3">
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
class=""></path>
</svg>
Home
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" class=""></polyline>
<path
d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
class=""></path>
</svg>
Inbox
<span class="ml-auto text-xs text-neutral-500">12</span>
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
class=""></path>
</svg>
Activity
</a>
</div>
<div class="px-3 pt-4">
<div class="text-[11px] uppercase tracking-wide text-neutral-500 mb-2 px-2">Channels</div>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-white"
style="background: rgba(60, 60, 60, 0.7);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 text-neutral-300">
<line x1="4" x2="20" y1="9" y2="9" class=""></line>
<line x1="4" x2="20" y1="15" y2="15" class=""></line>
<line x1="10" x2="8" y1="3" y2="21" class=""></line>
<line x1="16" x2="14" y1="3" y2="21" class=""></line>
</svg>
build-log
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<line x1="4" x2="20" y1="9" y2="9" class=""></line>
<line x1="4" x2="20" y1="15" y2="15" class=""></line>
<line x1="10" x2="8" y1="3" y2="21" class=""></line>
<line x1="16" x2="14" y1="3" y2="21" class=""></line>
</svg>
design-lab
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<line x1="4" x2="20" y1="9" y2="9" class=""></line>
<line x1="4" x2="20" y1="15" y2="15" class=""></line>
<line x1="10" x2="8" y1="3" y2="21" class=""></line>
<line x1="16" x2="14" y1="3" y2="21" class=""></line>
</svg>
weekly-sync
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<line x1="4" x2="20" y1="9" y2="9" class=""></line>
<line x1="4" x2="20" y1="15" y2="15" class=""></line>
<line x1="10" x2="8" y1="3" y2="21" class=""></line>
<line x1="16" x2="14" y1="3" y2="21" class=""></line>
</svg>
shipping
</a>
</div>
<div class="px-3 pt-4 pb-3">
<div class="text-[11px] uppercase tracking-wide text-neutral-500 mb-2 px-2">Direct messages</div>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<img alt="" class="h-5 w-5 rounded-full object-cover" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&w=128&h=128&auto=format&fit=facearea&facepad=3" style="filter: grayscale(100%);">
Mara
<span class="ml-auto h-2 w-2 rounded-full" style="background: #888;"></span>
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<img alt="" class="h-5 w-5 rounded-full object-cover" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=128&h=128&auto=format&fit=facearea&facepad=2" style="filter: grayscale(100%);">
Juno
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<img alt="" class="h-5 w-5 rounded-full object-cover" src="https://images.unsplash.com/photo-1541534401786-2077eed87a72?q=80&w=128&h=128&auto=format&fit=facearea&facepad=2" style="filter: grayscale(100%);">
Kai
</a>
</div>
</nav>
<!-- User Profile -->
<div class="border-t border-neutral-800/50 p-3">
<div class="flex items-center gap-2">
<img alt="User avatar" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?q=80&w=128&h=128&auto=format&fit=facearea&facepad=2" style="filter: grayscale(100%);">
<div class="flex-1 min-w-0">
<div class="text-sm font-medium text-white truncate">Sarah Chen</div>
<div class="text-xs text-neutral-400">Online</div>
</div>
<button class="p-1 rounded hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-400"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 flex flex-col xl:bg-neutral-950/80">
<!-- Channel Header -->
<div class="flex items-center justify-between border-b border-neutral-800/50 px-5 py-3"
style="background: rgba(30, 30, 30, 0.5);">
<div class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-5 w-5 text-neutral-300">
<line x1="4" x2="20" y1="9" y2="9" class=""></line>
<line x1="4" x2="20" y1="15" y2="15" class=""></line>
<line x1="10" x2="8" y1="3" y2="21" class=""></line>
<line x1="16" x2="14" y1="3" y2="21" class=""></line>
</svg>
<h1 class="text-lg font-semibold tracking-tight">build-log</h1>
<span class="text-xs rounded-full border border-neutral-700 bg-neutral-800/50 px-2 py-0.5 text-neutral-400">Public</span>
</div>
<div class="flex items-center gap-2">
<button class="p-2 rounded-md hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-neutral-300"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><circle cx="9" cy="7" r="4" class=""></circle><line x1="19" x2="19" y1="8" y2="14" class=""></line><line x1="22" x2="16" y1="11" y2="11" class=""></line></svg>
</button>
<button class="p-2 rounded-md hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-neutral-300"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
</div>
<!-- Messages -->
<div class="flex-1 overflow-y-auto">
<!-- Day Divider -->
<div class="flex items-center gap-3 px-5 py-4">
<div class="flex-1 h-px bg-neutral-800/50"></div>
<div class="text-xs text-neutral-500">Today</div>
<div class="flex-1 h-px bg-neutral-800/50"></div>
</div>
<!-- Message -->
<article class="hover:bg-neutral-900/30 pt-2 pr-5 pb-2 pl-5">
<div class="flex items-start gap-3">
<img alt="" class="h-9 w-9 rounded-full object-cover" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=128&h=128&auto=format&fit=facearea&facepad=2" style="filter: grayscale(100%);">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold tracking-tight">Mara</span>
<span class="text-xs text-neutral-500">1:42 AM</span>
</div>
<p class="mt-1 text-sm leading-6 text-neutral-200">
Iterated on the nebula background and updated the hero curve. Adjusted glow falloff on the stars;
going to refine motion blur next.
</p>
<div class="mt-3 grid grid-cols-4 gap-2">
<img alt="Attachment 1" class="aspect-[4/3] w-full rounded-lg object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ed011099-ff21-4b23-a3d7-d527f359d027_320w.webp" style="filter: grayscale(100%);">
<img alt="Attachment 2" class="aspect-[4/3] w-full rounded-lg object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9bd9174c-3cc5-4714-8894-813eb3a16e71_320w.webp" style="filter: grayscale(100%);">
<img alt="Attachment 3" class="aspect-[4/3] w-full rounded-lg object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/95b3125e-9329-4d1e-a44f-a163a91e2ed6_320w.webp" style="filter: grayscale(100%);">
<img alt="Attachment 4" class="aspect-[4/3] w-full rounded-lg object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/52af5c26-2af0-4b71-b126-03be07c3090a_320w.webp" style="filter: grayscale(100%);">
</div>
<div class="mt-3 flex items-center gap-2">
<button class="flex items-center gap-1 rounded-full border border-neutral-700 bg-neutral-800/40 px-2.5 py-1 text-xs text-neutral-300 hover:bg-neutral-800/70">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="M7 10v12" class=""></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" class=""></path></svg> 8
</button>
<button class="flex items-center gap-1 rounded-full border border-neutral-700 bg-neutral-800/40 px-2.5 py-1 text-xs text-neutral-300 hover:bg-neutral-800/70">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg> 2
</button>
</div>
<div class="mt-2 ml-0 flex items-center gap-2 text-xs text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4">
<path
d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
class=""></path>
</svg>
4 replies
</div>
</div>
</div>
</article>
<!-- Message -->
<article class="px-5 py-2 hover:bg-neutral-900/30">
<div class="flex items-start gap-3">
<img alt="" class="w-9 h-9 object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1085b0fa-eae9-4399-975e-50040b71b70e_320w.webp" style="filter: grayscale(100%);">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold tracking-tight">Kai</span>
<span class="text-xs text-neutral-500">5:08 AM</span>
</div>
<p class="mt-1 text-sm leading-6 text-neutral-200">
Dropping the second pass: https://assets.nova.space
</p>
</div>
</div>
</article>
</div>
<!-- Composer -->
<div class="border-t border-neutral-800/50 p-4" style="background: rgba(30, 30, 30, 0.5);">
<div
class="rounded-lg border border-neutral-700 bg-neutral-800/40 focus-within:ring-2 focus-within:ring-neutral-500/40">
<div class="flex items-center gap-2 px-3 py-2.5">
<button class="p-1 rounded hover:bg-neutral-700/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-300"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
<input class="flex-1 bg-transparent text-sm placeholder-neutral-500 focus:outline-none" placeholder="Message #build-log">
<div class="flex items-center gap-1">
<button class="p-1 rounded hover:bg-neutral-700/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="M8 14s1.5 2 4 2 4-2 4-2" class=""></path><line x1="9" x2="9.01" y1="9" y2="9" class=""></line><line x1="15" x2="15.01" y1="9" y2="9" class=""></line></svg>
</button>
<button class="p-1 rounded hover:bg-neutral-700/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-300"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
</button>
<button class="ml-1 rounded-md px-3 py-1.5 text-sm font-medium text-white" style="background: #606060;">
Send
</button>
</div>
</div>
</div>
</div>
</main>
<!-- Thread Panel -->
<aside class="w-80 border-l border-neutral-800/50 flex flex-col" style="background: rgba(30, 30, 30, 0.8);">
<div class="flex items-center justify-between px-4 py-3 border-b border-neutral-800/50">
<div class="text-sm font-semibold tracking-tight">Thread</div>
<button class="p-1 rounded hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-300"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
<div class="flex-1 overflow-y-auto">
<!-- Original message -->
<div class="px-4 py-4 border-b border-neutral-800/50">
<div class="flex items-start gap-3">
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=128&h=128&auto=format&fit=facearea&facepad=2" style="filter: grayscale(100%);">
<div class="min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold tracking-tight">Mara</span>
<span class="text-xs text-neutral-500">1:42 AM</span>
</div>
<p class="mt-1 text-sm leading-6 text-neutral-200">
Iterated on the nebula background and updated the hero curve.
</p>
<div class="mt-3 grid grid-cols-4 gap-1.5">
<img alt="" class="aspect-square w-full rounded object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/769698c4-33dc-42f0-a44e-8873b54ee68d_320w.webp" style="filter: grayscale(100%);">
<img alt="" class="aspect-square w-full rounded object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b5d2f250-eb47-40dc-a9fc-14ecd2a7fe86_320w.webp" style="filter: grayscale(100%);">
<img alt="" class="aspect-square w-full rounded object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/674b0b5e-1d1d-4190-a9d5-6a96808cfc92_320w.webp" style="filter: grayscale(100%);">
<img alt="" class="aspect-square w-full rounded object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/30dd5951-eeb5-4b75-ab70-4c9de46effb5_320w.webp" style="filter: grayscale(100%);">
</div>
</div>
</div>
</div>
<!-- Replies -->
<div class="px-4 py-4 space-y-4">
<div class="flex items-start gap-3">
<img alt="" class="h-7 w-7 rounded-full object-cover" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=128&h=128&auto=format&fit=facearea&facepad=2" style="filter: grayscale(100%);">
<div class="">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold tracking-tight">Juno</span>
<span class="text-xs text-neutral-500">2:01 AM</span>
</div>
<p class="mt-1 text-sm leading-6 text-neutral-200">The gradient is cleaner now. Could we soften the
right-side bloom 10%?</p>
</div>
</div>
<div class="flex items-start gap-3">
<img alt="" class="h-7 w-7 rounded-full object-cover" src="https://images.unsplash.com/photo-1541534401786-2077eed87a72?q=80&w=128&h=128&auto=format&fit=facearea&facepad=2" style="filter: grayscale(100%);">
<div class="">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold tracking-tight">Kai</span>
<span class="text-xs text-neutral-500">2:15 AM</span>
</div>
<p class="mt-1 text-sm leading-6 text-neutral-200">Uploading a clip with eased camera motion in the
hero.</p>
</div>
</div>
</div>
</div>
<!-- Thread Composer -->
<div class="border-t border-neutral-800/50 p-3">
<div
class="rounded-lg border border-neutral-700 bg-neutral-800/40 focus-within:ring-2 focus-within:ring-neutral-500/40">
<div class="flex items-center gap-2 px-3 py-2">
<input class="flex-1 bg-transparent text-sm placeholder-neutral-500 focus:outline-none" placeholder="Reply">
<button class="rounded-md px-3 py-1.5 text-sm font-medium text-white" style="background: #606060;">
Reply
</button>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>