Componente de ventana de chat
Un componente de ventana de chat simple con microinteracciones, diseño receptivo y soporte de temas oscuros, adecuado para blogs o consumo de contenido.
Código 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>Componentes relacionados
Componente de ventana de chat
Un componente de ventana de chat simple diseñado con elementos 3D, combinación de colores en tonos tierra y soporte de tema oscuro receptivo.
RetroChatWindow
Un componente de ventana de chat de estilo retro/vintage que utiliza Tailwind CSS, con diseño responsivo y compatibilidad con el modo oscuro. Incluye mensajes de marcador de posición y avatares. Sin JavaScript.
Componente de ventana de chat
Un componente de ventana de chat receptivo diseñado con los principios de Material Design, con un esquema de color otoñal adecuado para organizaciones sin fines de lucro / benéficas. Incluye soporte para el modo oscuro y elementos interactivos como burbujas de mensaje y un campo de entrada.