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

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fensterkomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es verfügt über eine Kopfzeile mit Benutzerinformationen, einen Nachrichtenbereich mit eingehenden und ausgehenden Nachrichten und eine Fußzeile zum Eingeben neuer Nachrichten. Bilder sind Platzhalter aus picsum.photos und randomuser.me.

Vorschau

HTML-Code 

<div class="flex flex-col h-screen bg-gray-900 text-gray-200">
  <!-- Header -->
  <header class="flex items-center justify-between p-4 bg-gray-800">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <h1 class="text-lg font-semibold">Chat User</h1>
    </div>
    <!-- Add any header icons here -->
  </header>

  <!-- Message Area -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex items-start mb-4">
      <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Other User Avatar">
      <div class="flex flex-col">
        <div class="bg-gray-700 text-gray-200 p-3 rounded-lg mb-1">
          Hello! How are you?
        </div>
        <span class="text-xs text-gray-500">10:00 AM</span>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-end justify-end mb-4">
      <div class="flex flex-col items-end">
        <div class="bg-blue-600 text-white p-3 rounded-lg mb-1">
          I'm good, thanks! How about you?
        </div>
        <span class="text-xs text-gray-500">10:05 AM</span>
      </div>
      <img class="w-8 h-8 rounded-full ml-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>

    <!-- Add more messages here -->

  </div>

  <!-- Footer -->
  <footer class="flex items-center p-4 bg-gray-800">
    <input type="text" class="flex-1 rounded-full px-4 py-2 mr-4 bg-gray-700 text-gray-200 focus:outline-none" placeholder="Type your message...">
    <button class="bg-blue-600 text-white rounded-full p-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"/>
      </svg>
    </button>
  </footer>
</div>

Verwandte Komponenten

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

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fenster-Komponente, die mit Material Design-Prinzipien und Tailwind CSS gestaltet ist und Unterstützung für den Dunkelmodus bietet.

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