Componente de ventana de chat
Un componente simple de ventana de chat diseñado en estilo Material Design con un tema oscuro y un diseño receptivo adecuado para interfaces de redes sociales.
Código HTML
<div class="h-screen bg-gray-100 dark:bg-gray-800 flex flex-col justify-end">
<div class="max-w-md w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4">
<div class="flex flex-col space-y-4 overflow-y-scroll h-80">
<div class="flex items-start space-x-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
Hello, how are you?
</div>
</div>
<div class="flex items-start space-x-2">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<div class="bg-gray-300 text-gray-800 p-2 rounded-lg rounded-br-none">
I'm good, thanks! How about you?
</div>
</div>
<div class="flex items-start space-x-2">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
I'm doing well! Ready for the weekend?
</div>
</div>
</div>
<div class="mt-4 flex">
<input type="text" placeholder="Type your message..." class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-500">
<button class="bg-blue-500 text-white p-2 rounded-lg ml-2 focus:outline-none">Send</button>
</div>
</div>
</div>Componentes relacionados
Componente de ventana de chat con diseño 3D, capacidad de respuesta y modo oscuro
Un componente de ventana de chat responsivo con elementos de diseño 3D y soporte de temas oscuros usando Tailwind CSS. Incluye avatares e imágenes de marcador de posición.
Componente de ventana de chat
Un componente de ventana de chat tridimensional en escala de grises para paneles con complejidad moderada y funciones interactivas. Diseño responsivo con soporte para temas oscuros.
Componente de ventana de chat
Un componente de ventana de chat neumórfico diseñado para aplicaciones de comercio electrónico, con un modo oscuro y un diseño responsivo que utiliza Tailwind CSS.