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 neumorphe Chat-Fenster-Komponente, die für E-Commerce-Anwendungen entwickelt wurde, mit einem Dunkelmodus und responsivem Design unter Verwendung von Tailwind CSS.

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

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