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

Chat-Fenster-Komponente

Eine einfache Chat-Fenster-Komponente, die mit 3D-Elementen, einem Farbschema in Erdtönen und einer reaktionsschnellen Unterstützung für dunkle Themen gestaltet wurde.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-green-600 dark:bg-green-700 p-4">
        <h2 class="text-white text-lg font-semibold">Chat Window</h2>
    </div>
    <div class="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 class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <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/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">I'm looking for more information about your services.</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 class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Sure! Please check our portfolio.</p>
            </div>
        </div>
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 shadow-sm" />
            <button class="ml-2 bg-green-600 dark:bg-green-700 text-white px-4 py-2 rounded-lg shadow-lg">Send</button>
        </div>
    </div>
</div>

Verwandte Komponenten

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

Chat-Fenster-Komponente

Eine einfache, reaktionsschnelle Chat-Fensterkomponente mit einem organischen/von der Natur inspirierten Design, Neon-/Elektro-Farbschema und Unterstützung für den Dunkelmodus, geeignet für Buchungs-/Reservierungssysteme.

Offen

Chat-Fenster-Komponente

Eine komplexe, reaktionsschnelle Chat-Fensterkomponente mit Monospace-/Entwickler-Design-Ästhetik, herbstlichem Farbschema, optimiert für Sport-/Fitnessanwendungen, einschließlich Unterstützung des Dunkelmodus und interaktiver Elemente.

Offen