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

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fenster-Komponente, die ein modernes 3D-Design mit Pastellfarben und interaktiven Funktionen präsentiert, die für Portfolio-Displays geeignet sind.

Vorschau

HTML-Code 

<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6">
    <div class="mb-4 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-300 dark:border-gray-600 shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Available 24/7</p>
        </div>
    </div>
    <div class="h-64 overflow-y-auto rounded-lg border border-gray-300 dark:border-gray-600 p-4 bg-gray-50 dark:bg-gray-700 shadow-inner">
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Hello! How can I assist you today?</p>
            </div>
        </div>
        <div class="mb-2 flex items-start justify-end">
            <div class="mr-2 bg-blue-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">I'm looking for some information on your services.</p>
            </div>
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-purple-300 dark:border-gray-600">
        </div>
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Sure! Here’s what you need to know...</p>
            </div>
        </div>
    </div>
    <form class="mt-4">
        <div class="flex items-center border rounded-lg border-gray-300 dark:border-gray-600 overflow-hidden">
            <input type="text" placeholder="Type your message..." class="flex-grow p-2 text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg focus:outline-none" />
            <button type="submit" class="bg-pink-400 dark:bg-pink-600 text-white px-4 py-2 rounded-lg">Send</button>
        </div>
    </form>
</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

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

Eine einfache, saubere und vertrauenswürdige Chat-Fensterkomponente mit einem pastellfarbenen Farbschema, geeignet für Unternehmens- oder Reise-/Tourismus-Websites. Es reagiert vollständig und unterstützt den Dunkelmodus.

Offen