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

SkeuomorphicChatWindow

Eine Chat-Fenster-Webkomponente, die mit Skeuomorphism und Tailwind CSS formatiert ist. Mit responsivem Layout, Unterstützung für dunkle Themen über CSS, abgerundeten Nachrichtenblasen, Farbverläufen und Schatten für ein taktiles Gefühl. Enthält Platzhalter, Avatare und Bilder. Kein JavaScript enthalten.

Offen

Chat-Fenster-Komponente 50

Eine minimalistische Chat-Fensterkomponente mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS. Es enthält Platzhalterbilder und Avatarbilder aus zufälligen Platzhalterquellen.

Offen