Компонент окна чата
Простой компонент окна чата с микровзаимодействиями, адаптивным дизайном и поддержкой темных тем, подходящий для блогов или потребления контента.
HTML-код
<div class="flex flex-col h-screen antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200">
<div class="flex flex-row items-center justify-between flex-shrink-0 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center gap-3">
<img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<div class="font-semibold">John Doe</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Active now</div>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex-1 p-4 overflow-y-auto">
<!-- Incoming Message -->
<div class="flex items-end mb-4">
<img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
<div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
<div>
<span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
Hey there! How are you doing?
</span>
</div>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex items-end justify-end mb-4">
<div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-1 items-end">
<div>
<span class="inline-block px-4 py-2 text-white bg-blue-500 rounded-lg">
I'm doing great, thanks for asking! How about you?
</span>
</div>
</div>
<img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 ml-3 rounded-full">
</div>
<!-- Another Incoming Message -->
<div class="flex items-end mb-4">
<img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
<div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
<div>
<span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
I'm doing good too! Just chilling and working on some projects.
</span>
</div>
</div>
</div>
</div>
<div class="flex-shrink-0 px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<div class="relative flex items-center">
<input type="text" placeholder="Type your message..." class="flex-grow w-full h-10 px-4 pr-10 text-gray-700 placeholder-gray-400 bg-gray-100 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
<button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 transform rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
</button>
</div>
</div>
</div>Связанные компоненты
Компонент окна чата с 3D-дизайном, отзывчивостью и темным режимом
Адаптивный компонент окна чата с элементами 3D-дизайна и поддержкой темной темы с использованием Tailwind CSS. Включает замещающие аватары и изображения.
Компонент окна чата
Адаптивный компонент окна чата, стилизованный под принципы Material Design и Tailwind CSS, с поддержкой темного режима.
Компонент окна чата
Простой, понятный и профессиональный компонент окна чата с корпоративной синей цветовой гаммой, подходящий для бизнес-среды, особенно в контексте моды и красоты. Отличается адаптивным дизайном, поддержкой темного режима и базовыми функциями чата.