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

Chat-Fenster-Komponente

Eine Chat-Fenster-Komponente im Brutalismus-Stil mit hohem Kontrast, responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="max-w-lg mx-auto mt-10 p-4 bg-gray-100 rounded-lg shadow-lg dark:bg-gray-800 border-2 border-black dark:border-gray-600">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-black dark:text-white">Chat Room</h2>
        <button class="px-3 py-1 text-sm font-semibold text-white bg-blue-600 rounded hover:bg-blue-500 focus:outline-none">Join</button>
    </div>
    <div class="border-2 border-black dark:border-gray-600 h-64 overflow-y-scroll 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>
                <span class="font-bold text-black dark:text-white">John Doe:</span>
                <p class="text-black dark:text-gray-200">Hello! How is everyone?</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>
                <span class="font-bold text-black dark:text-white">Jane Smith:</span>
                <p class="text-black dark:text-gray-200">I'm doing great, thanks for asking!</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>
                <span class="font-bold text-black dark:text-white">Mike Brown:</span>
                <p class="text-black dark:text-gray-200">Excited for the weekend!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Emily White:</span>
                <p class="text-black dark:text-gray-200">Same here! Any plans?</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <textarea rows="3" class="w-full p-2 border-2 border-black dark:border-gray-600 rounded" placeholder="Type a message..."></textarea>
        <button class="mt-2 px-3 py-1 text-sm font-semibold text-white bg-green-600 rounded hover:bg-green-500 focus:outline-none">Send</button>
    </div>
</div>

Verwandte Komponenten

RetroChatWindow

Eine Chat-Fensterkomponente im Retro-/Vintage-Stil, die Tailwind CSS verwendet, mit responsivem Design und Unterstützung für den Dunkelmodus. Enthält Platzhalternachrichten und Avatare. Kein JavaScript.

Offen

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

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