Componenti Finestra di chat Componente della finestra di chat

Componente della finestra di chat

Un semplice componente della finestra di chat progettato con elementi 3D, combinazione di colori dei toni della terra e supporto per temi scuri reattivi.

Anteprima

Codice HTML

<div class="max-w-md mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-green-600 dark:bg-green-700 p-4">
        <h2 class="text-white text-lg font-semibold">Chat Window</h2>
    </div>
    <div class="p-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">I'm looking for more information about your services.</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Sure! Please check our portfolio.</p>
            </div>
        </div>
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 shadow-sm" />
            <button class="ml-2 bg-green-600 dark:bg-green-700 text-white px-4 py-2 rounded-lg shadow-lg">Send</button>
        </div>
    </div>
</div>

Componenti correlati

RetroChatWindow

Un componente per la finestra di chat in stile retrò/vintage che utilizza Tailwind CSS, con design reattivo e supporto per la modalità oscura. Include messaggi segnaposto e avatar. Niente JavaScript.

Aperto

Componente della finestra di chat

Un semplice componente della finestra di chat progettato in stile Material Design con un tema scuro e un layout reattivo adatto alle interfacce dei social media.

Aperto

Componente finestra di chat con progettazione 3D, reattività e modalità oscura

Un componente della finestra di chat reattiva con elementi di progettazione 3D e supporto per temi scuri utilizzando Tailwind CSS. Include avatar e immagini segnaposto.

Aperto