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

Chat-Fenster-Komponente

Eine einfache Chat-Fenster-Komponente, die im Material Design-Stil mit einem dunklen Thema und einem responsiven Layout gestaltet wurde, das für Social-Media-Schnittstellen geeignet ist.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Chat-Fenster-Komponente - Reise-/Tourismus-Skeuomorph

Eine komplexe, reaktionsschnelle Chat-Fenster-Komponente, die für Reise-/Tourismus-Websites entwickelt wurde, mit einem skeuomorphen Stil mit einem analogen Farbschema und Unterstützung für den Dunkelmodus.

Offen

Einfaches brutalistisches Chatfenster

Brutalistische, einfache Graustufen-Chat-Fensterkomponente für den Konsum von Blog-Inhalten mit Dunkelmodus und responsivem Design

Offen

Chat-Fenster-Komponente

Eine responsive Chat-Fenster-Komponente, die mit einer von Papier/Druck inspirierten Ästhetik mit Sepia-/Brauntönen gestaltet wurde. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente, die für Dating- oder soziale Plattformen geeignet sind.

Offen