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

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fensterkomponente mit Mikrointeraktionen, die sich auf ansprechende Animationen konzentrieren. Es unterstützt den Dunkelmodus und verwendet Tailwind CSS für das Styling.

Vorschau

HTML-Code 

<div class="flex flex-col max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 ease-in-out hover:shadow-2xl">
    <div class="flex items-center justify-between p-4 border-b-2 border-gray-200 dark:border-gray-700">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat</h2>
        <button class="focus:outline-none">
            <svg class="h-6 w-6 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.55 1.21a1 1 0 01-1.45-1.21zM4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
    </div>
    <div class="overflow-auto max-h-96 p-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-150">
                <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/thumb/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-150">
                <p class="text-gray-800 dark:text-gray-200">I have a question about my order.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t-2 border-gray-200 dark:border-gray-700">
        <form class="flex">
            <input type="text" placeholder="Type your message..." class="flex-grow p-2 border rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-200 ease-in-out">
            <button type="submit" class="ml-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 ease-in-out">
                Send
            </button>
        </form>
    </div>
</div>

Verwandte Komponenten

Chat-Fenster-Komponente

Eine einfache Chat-Fensterkomponente mit Mikrointeraktionen, responsivem Design und Unterstützung für dunkle Themen, die sich für Blogs oder den Konsum von Inhalten eignet.

Offen

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fensterkomponente mit Unterstützung für den Dunkelmodus, die für den geschäftlichen Einsatz mit subtilen Mikrointeraktionen entwickelt wurde. Verwendet ein monochromatisches Farbschema. Kein JavaScript erforderlich.

Offen

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fenster-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde und ein herbstliches Farbschema aufweist, das für gemeinnützige Organisationen geeignet ist. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente wie Nachrichtenblasen und ein Eingabefeld.

Offen