Componentes Ventana de chat Componente de ventana de chat

Componente de ventana de chat

Un componente de ventana de chat receptivo que muestra un diseño 3D moderno con colores pastel y funciones interactivas, adecuado para exhibiciones de portafolios.

Vista previa

Código HTML

<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6">
    <div class="mb-4 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-300 dark:border-gray-600 shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Available 24/7</p>
        </div>
    </div>
    <div class="h-64 overflow-y-auto rounded-lg border border-gray-300 dark:border-gray-600 p-4 bg-gray-50 dark:bg-gray-700 shadow-inner">
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Hello! How can I assist you today?</p>
            </div>
        </div>
        <div class="mb-2 flex items-start justify-end">
            <div class="mr-2 bg-blue-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">I'm looking for some information on your services.</p>
            </div>
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-purple-300 dark:border-gray-600">
        </div>
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Sure! Here’s what you need to know...</p>
            </div>
        </div>
    </div>
    <form class="mt-4">
        <div class="flex items-center border rounded-lg border-gray-300 dark:border-gray-600 overflow-hidden">
            <input type="text" placeholder="Type your message..." class="flex-grow p-2 text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg focus:outline-none" />
            <button type="submit" class="bg-pink-400 dark:bg-pink-600 text-white px-4 py-2 rounded-lg">Send</button>
        </div>
    </form>
</div>

Componentes relacionados

Componente de ventana de chat

Un componente de ventana de chat responsivo con elementos de diseño 3D y soporte de temas oscuros usando Tailwind CSS. No se requiere JavaScript.

Abrir

Componente de ventana de chat

Un componente de ventana de chat receptivo con soporte para modo oscuro, diseñado para uso empresarial con microinteracciones sutiles. Utiliza un esquema de color monocromático. No se requiere JavaScript.

Abrir

Componente de ventana de chat

Un componente de ventana de chat diseñado en estilo brutalismo con alto contraste, efectos responsivos y compatibilidad con temas oscuros.

Abrir