Загрузка...
Адаптивный UI чат с боковой панелью для каналов и ЛС. Идеален для приложений командной работы, соцсетей и поддержки.
<div class="relative overflow-hidden text-left bg-gray-900/50 border-white/10 border rounded-2xl shadow-2xl backdrop-blur-lg">
<!-- Chat header -->
<div class="flex items-center justify-between px-4 py-3 border-b border-white/10 bg-black/40">
<div class="flex items-center gap-3">
<div class="relative">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-pink-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-white">
<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>
<path d="m22 21-3-3" class=""></path>
<circle cx="20" cy="7" r="3" class=""></circle>
</svg>
</span>
<span class="absolute -top-0.5 -right-0.5 w-3 h-3 bg-emerald-400 rounded-full border-2 border-black"></span>
</div>
<div>
<p class="text-sm font-medium">Product Team</p>
<p class="text-xs text-gray-400">12 members • 3 online</p>
</div>
</div>
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1.5 rounded-md bg-emerald-400/10 px-2 py-1 text-xs text-emerald-300 ring-1 ring-emerald-400/20">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="12" cy="12" r="3" class=""></circle>
</svg>
Active
</span>
</div>
</div>
<!-- Chat content -->
<div class="grid md:grid-cols-3 gap-0 h-80">
<!-- Sidebar -->
<div class="bg-black/20 border-white/10 border-r pt-4 pr-4 pb-4 pl-4">
<div class="space-y-3">
<div class="">
<p class="text-xs text-gray-400 mb-2">CHANNELS</p>
<div class="space-y-1">
<div class="flex items-center gap-2 px-2 py-1.5 rounded-md bg-white/5 text-sm">
<span class="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
general
</div>
<div class="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-400 hover:text-white">
<span class="w-1.5 h-1.5 bg-gray-600 rounded-full"></span>
product-updates
</div>
<div class="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-400 hover:text-white">
<span class="w-1.5 h-1.5 bg-gray-600 rounded-full"></span>
design
</div>
</div>
</div>
<div class="">
<p class="text-xs text-gray-400 mb-2">DIRECT MESSAGES</p>
<div class="space-y-1">
<div class="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-400 hover:text-white">
<div class="relative">
<div class="w-4 h-4 bg-purple-500 rounded-full"></div>
<div class="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-emerald-400 rounded-full border border-black"></div>
</div>
Sarah Chen
</div>
<div class="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-400 hover:text-white">
<div class="w-4 h-4 bg-blue-500 rounded-full"></div>
Alex Park
</div>
</div>
</div>
</div>
</div>
<!-- Messages -->
<div class="md:col-span-2 flex flex-col">
<div class="flex-1 p-4 space-y-4 overflow-y-auto">
<!-- Message 1 -->
<div class="flex items-start gap-3">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=64&q=80" alt="" class="w-8 h-8 rounded-full object-cover">
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-medium">Sarah Chen</span>
<span class="text-xs text-gray-400">2:34 PM</span>
</div>
<p class="text-sm text-gray-300 mt-1">Great work on the new onboarding flow! The conversion rates look promising 🚀</p>
</div>
</div>
<!-- Message 2 -->
<div class="flex items-start gap-3">
<img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=64&q=80" alt="" class="w-8 h-8 rounded-full object-cover">
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-medium">Alex Park</span>
<span class="text-xs text-gray-400">2:35 PM</span>
</div>
<p class="text-sm text-gray-300 mt-1">Thanks! Should we schedule a review session for next week?</p>
</div>
</div>
<!-- Message 3 with file -->
<div class="flex items-start gap-3">
<img src="https://images.unsplash.com/photo-1500649297466-74794c70acfc?w=64&q=80" alt="" class="w-8 h-8 rounded-full object-cover">
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-medium">Mike Johnson</span>
<span class="text-xs text-gray-400">2:36 PM</span>
</div>
<p class="text-sm text-gray-300 mt-1">I've attached the updated wireframes</p>
<div class="mt-2 p-3 rounded-lg border border-white/10 bg-white/5 max-w-xs">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded bg-purple-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-purple-400">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
<path d="m14 2 6 6" class=""></path>
</svg>
</div>
<div class="">
<p class="text-xs">wireframes-v2.figma</p>
<p class="text-xs text-gray-400">2.4 MB</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Message input -->
<div class="p-4 border-t border-white/10">
<div class="flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
<path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.64 16.2a2 2 0 0 1-2.83-2.83l8.49-8.49" class=""></path>
</svg>
<input type="text" placeholder="Type a message..." class="flex-1 bg-transparent text-sm placeholder:text-gray-400 focus:outline-none">
<div class="flex items-center gap-1">
<button class="p-1 rounded hover:bg-white/10 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" class=""></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path>
</svg>
</button>
<button class="p-1.5 rounded-md bg-purple-500 hover:bg-purple-600 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-white">
<path d="M7 7h10v10" class=""></path>
<path d="M7 17 17 7" class=""></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>