Componentes Ventana de chat Componente de ventana de chat

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.

Vista previa

Código HTML

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg max-w-md w-full p-4">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Chat Window</h2>
        <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white focus:outline-none">
            <span>&times;</span>
        </button>
    </div>
    <div class="flex flex-col space-y-4 overflow-y-auto h-64">
        <div class="flex items-start space-x-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
                Hello! How are you?
            </div>
        </div>
        <div class="flex items-start space-x-2 justify-end">
            <div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
                I am fine, thank you! And you?
            </div>
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
        </div>
        <div class="flex items-start space-x-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
                Doing great! Just working on some projects.
            </div>
        </div>
        <div class="flex items-start space-x-2 justify-end">
            <div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
                That sounds interesting!
            </div>
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar">
        </div>
    </div>
    <div class="mt-4">
        <input type="text" placeholder="Type your message..." class="w-full bg-gray-100 dark:bg-gray-600 border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">
    </div>
</div>

Componentes relacionados

Componente de ventana de chat

Un componente de ventana de chat complejo, de color triádico y centrado en la microinteracción, adecuado para plataformas inmobiliarias. Cuenta con una lista de conversación, un área de chat activa con burbujas de mensajes y un campo de entrada interactivo, todo totalmente receptivo y con soporte para modo oscuro.

Abrir

Componente de ventana de chat

Un componente de ventana de chat responsivo diseñado con una estética inspirada en el papel/impresión, utilizando tonos sepia/marrón. Incluye soporte para modo oscuro y elementos interactivos adecuados para citas o plataformas sociales.

Abrir

Componente de ventana de chat

Un componente de ventana de chat simple, limpio y confiable con una combinación de colores pastel, adecuado para sitios web corporativos o de viajes/turismo. Es totalmente sensible y es compatible con el modo oscuro.

Abrir