Componente de ventana de chat
Un componente de ventana de chat responsivo con soporte de modo oscuro usando Tailwind CSS. Cuenta con un encabezado con información del usuario, un área de mensajes con mensajes entrantes y salientes y un pie de página para escribir nuevos mensajes. Las imágenes son marcadores de posición de picsum.photos y randomuser.me.
Código HTML
<div class="flex flex-col h-screen bg-gray-900 text-gray-200">
<!-- Header -->
<header class="flex items-center justify-between p-4 bg-gray-800">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h1 class="text-lg font-semibold">Chat User</h1>
</div>
<!-- Add any header icons here -->
</header>
<!-- Message Area -->
<div class="flex-1 overflow-y-auto p-4">
<!-- Incoming Message -->
<div class="flex items-start mb-4">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Other User Avatar">
<div class="flex flex-col">
<div class="bg-gray-700 text-gray-200 p-3 rounded-lg mb-1">
Hello! How are you?
</div>
<span class="text-xs text-gray-500">10:00 AM</span>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex items-end justify-end mb-4">
<div class="flex flex-col items-end">
<div class="bg-blue-600 text-white p-3 rounded-lg mb-1">
I'm good, thanks! How about you?
</div>
<span class="text-xs text-gray-500">10:05 AM</span>
</div>
<img class="w-8 h-8 rounded-full ml-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
<!-- Add more messages here -->
</div>
<!-- Footer -->
<footer class="flex items-center p-4 bg-gray-800">
<input type="text" class="flex-1 rounded-full px-4 py-2 mr-4 bg-gray-700 text-gray-200 focus:outline-none" placeholder="Type your message...">
<button class="bg-blue-600 text-white rounded-full p-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"/>
</svg>
</button>
</footer>
</div>Componentes relacionados
Componente de ventana de chat
Un componente de ventana de chat responsivo diseñado con los principios de Material Design y Tailwind CSS, con soporte para modo oscuro.
Componente de ventana de chat
Un componente de ventana de chat simple, receptivo, inspirado en Material Design con tonos cálidos al atardecer, adecuado para sitios web comerciales y corporativos, compatible con el modo oscuro.
Componente de ventana de chat
Un componente de ventana de chat simple, limpio y profesional con un esquema de color azul corporativo, adecuado para entornos comerciales, particularmente en contextos de moda / belleza. Cuenta con diseño responsivo, compatibilidad con modo oscuro y funcionalidad básica de chat.