CCHub Logo CCHub Tailwind Collection
Komponenten Chat-Fenster Chat-Fenster-Komponente

Chat-Fenster-Komponente

Eine einfache Chat-Fenster-Komponente, die mit 3D-Elementen, einem Farbschema in Erdtönen und einer reaktionsschnellen Unterstützung für dunkle Themen gestaltet wurde.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fensterkomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es verfügt über eine Kopfzeile mit Benutzerinformationen, einen Nachrichtenbereich mit eingehenden und ausgehenden Nachrichten und eine Fußzeile zum Eingeben neuer Nachrichten. Bilder sind Platzhalter aus picsum.photos und randomuser.me.

Offen

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fensterkomponente mit einem triadischen Farbschema, Mikrointeraktionen und Unterstützung für den Dunkelmodus, die für den E-Commerce entwickelt wurde. Es verfügt über einen Chat-Header, eine Nachrichtenliste mit Absender-/Empfängernachrichten und eine Nachrichteneingabe.

Offen

Chat-Fensterkomponente mit 3D-Design, Reaktionsfähigkeit und Dunkelmodus

Eine reaktionsschnelle Chat-Fensterkomponente mit 3D-Designelementen und Unterstützung für dunkle Themen mit Tailwind CSS. Enthält Platzhalter, Avatare und Bilder.

Offen