Chat-Fenster

Chat-Fenster-Komponente

Eine minimalistische Chat-Fensterkomponente für E-Commerce-Websites mit einem Graustufen-Farbschema, moderater Komplexität und Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Erstellt mit HTML und Tailwind CSS.

Vorschau öffnen

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Chat Header -->
  <header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 shadow-md">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
      <h1 class="ml-3 text-lg font-semibold text-gray-800 dark:text-white">Customer Support</h1>
    </div>
    <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
      <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="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </header>

  <!-- Chat Body -->
  <div class="flex-1 overflow-y-auto p-4 space-y-4">
    <!-- Incoming Message -->
    <div class="flex justify-start">
      <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
        <p>Hello! How can I help you today?</p>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
        <p>I have a question about my order.</p>
      </div>
    </div>

    <!-- Incoming Message with Avatar -->
    <div class="flex justify-start items-start">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/thumb/women/76.jpg" alt="User Avatar">
      <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
        <p>Ok, please provide your order number.</p>
      </div>
    </div>

    <!-- Outgoing Message with Image -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
        <p>Here is a screenshot:</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/id/237/200/150" alt="Order Screenshot">
      </div>
    </div>

  </div>

  <!-- Chat Footer (Input Area) -->
  <footer class="flex items-center p-4 bg-white dark:bg-gray-800 shadow-md">
    <input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600">
    <button class="ml-4 p-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700">
      Send
    </button>
  </footer>
</div>

RetroChatWindow

Eine Chat-Fensterkomponente im Retro-/Vintage-Stil, die Tailwind CSS verwendet, mit responsivem Design und Unterstützung für den Dunkelmodus. Enthält Platzhalternachrichten und Avatare. Kein JavaScript.

Vorschau öffnen

                <div class="flex flex-col h-96 w-80 sm:w-96 md:w-1/2 lg:w-1/3 mx-auto bg-gray-300 dark:bg-gray-800 border-4 border-black dark:border-white shadow-lg dark:shadow-xl font-mono">
  <!-- Header -->
  <div class="bg-gray-500 dark:bg-gray-900 text-white dark:text-gray-300 p-2 border-b-4 border-black dark:border-white flex justify-between items-center">
    <div class="text-lg font-bold">RetroNET Chat</div>
    <div class="flex space-x-1">
      <div class="w-3 h-3 bg-red-500 dark:bg-red-700 border border-black dark:border-white cursor-pointer" title="Close"></div>
      <div class="w-3 h-3 bg-yellow-500 dark:bg-yellow-600 border border-black dark:border-white cursor-pointer" title="Minimize"></div>
      <div class="w-3 h-3 bg-green-500 dark:bg-green-700 border border-black dark:border-white cursor-pointer" title="Maximize"></div>
    </div>
  </div>
  <!-- Messages Area -->
  <div class="flex-grow p-4 overflow-y-auto space-y-4">
    <!-- Received Message -->
    <div class="flex items-start space-x-3">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
        <p>Hello! Welcome to RetroNET Chat. How can I assist you?</p>
      </div>
    </div>
    <!-- Sent Message -->
    <div class="flex items-start justify-end space-x-3 flex-row-reverse">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
        <p>Hi there! I love the retro design!</p>
      </div>
    </div>
     <!-- Received Message with Image -->
    <div class="flex items-start space-x-3">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
        <p>Glad you like it! Here's a cool retro image:</p>
        <img src="https://picsum.photos/id/6/200/150" alt="Random Retro Image" class="mt-2 rounded-lg border-2 border-black dark:border-white max-w-full h-auto">
      </div>
    </div>
     <!-- Sent Message -->
    <div class="flex items-start justify-end space-x-3 flex-row-reverse">
      <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
        <p>Awesome! ✨</p>
      </div>
    </div>
  </div>
  <!-- Input Area -->
  <div class="p-4 border-t-4 border-black dark:border-white flex space-x-2">
    <input type="text" placeholder="Type your message..." class="flex-grow p-2 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 placeholder-gray-600 dark:placeholder-gray-400">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded border-2 border-black dark:border-white dark:bg-blue-700 dark:hover:bg-blue-800">
      Send
    </button>
  </div>
</div>

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fensterkomponente mit 3D-Designelementen und Unterstützung für dunkle Themen mit Tailwind CSS. Kein JavaScript erforderlich.

Vorschau öffnen

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4"> <div class="flex-col flex flex-grow w-full max-w-xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden"> <div class="flex flex-col flex-grow h-0 p-4 overflow-auto"> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs"> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/women/79.jpg" alt="Avatar" class="rounded-full"></div> <div class="div"> <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-r-lg rounded-bl-lg shadow-md"> <p class="text-sm text-gray-800 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> </div> <div class="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"> <div class="div"> <div class="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg shadow-md"> <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <span class="text-xs text-gray-500 dark:text-gray-400 leading-none">2 min ago</span> </div> <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700"><img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar" class="rounded-full"></div> </div> </div> <div class="bg-gray-300 dark:bg-gray-700 p-4"> <input class="flex items-center h-10 w-full rounded px-3 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200" type="text" placeholder="Type your message…"> </div> </div> </div>

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 öffnen

                <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>

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 öffnen

                <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>

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.

Vorschau öffnen

                <div class="flex flex-col w-full max-w-sm md:max-w-md lg:max-w-lg mx-auto my-8 rounded-lg overflow-hidden shadow-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 dark:text-white">
  <!-- Header -->
  <div class="flex items-center p-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-md dark:from-blue-800 dark:to-blue-900">
    <img class="w-8 h-8 rounded-full mr-3 border-2 border-white shadow" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    <span class="font-semibold text-lg">John Doe</span>
  </div>

  <!-- Messages Area -->
  <div class="flex-1 p-4 h-64 overflow-y-auto space-y-4 bg-gray-50 dark:bg-gray-800">
    <!-- Received Message -->
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Hey, how's it going?</p>
      </div>
    </div>

    <!-- Sent Message -->
    <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>I'm doing well, thanks! How about you?</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>

     <!-- Received Image Message -->
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
          <img src="https://picsum.photos/id/237/200/150" alt="Image message" class="w-full h-auto object-cover">
       </div>
    </div>

     <!-- Sent Image Message -->
    <div class="flex items-end justify-end">
      <div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
           <img src="https://picsum.photos/id/23/200/150" alt="Image message" class="w-full h-auto object-cover">
       </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>

     <!-- More messages for scrolling -->
      <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </div>
      <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>


  </div>

  <!-- Input Area -->
  <div class="flex items-center p-3 border-t border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-700">
    <input type="text" placeholder="Type a message..." class="flex-1 rounded-lg px-4 py-2 mr-3 bg-white border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:placeholder-gray-400 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500">
    <button class="px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg shadow-md hover:from-green-600 hover:to-green-700 dark:from-green-700 dark:to-green-800 dark:hover:from-green-800 dark:hover:to-green-900">Send</button>
  </div>
</div>

Chat-Fensterkomponente mit 3D-Design, Reaktionsfähigkeit und Dunkelmodus

Eine reaktionsschnelle Chat-Fensterkomponente mit 3D-Designelementen und Unterstützung für dunkle Themen mit Tailwind CSS. Enthält Platzhalter, Avatare und Bilder.

Vorschau öffnen

                <div class="flex flex-col h-[600px] antialiased bg-gray-100 dark:bg-gray-800 relative overflow-hidden rounded-lg shadow-lg">
    <!-- 3D Effect div (optional, for background depth) -->
    <div class="absolute inset-0 z-0" style="background-image: linear-gradient(to bottom right, #3b82f6, #9333ea); transform: perspective(1000px) rotateY(5deg) rotateX(5deg);"></div>

    <div class="flex-1 p:2 sm:p-6 flex flex-col z-10">
        <div class="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-gray-200 dark:bg-gray-700 p-4 h-full">
            <div class="flex flex-col h-full overflow-x-auto mb-4">
                <div class="flex flex-col h-full">
                    <div class="grid grid-cols-12 gap-y-2">
                        <!-- Incoming Message (example) -->
                        <div class="col-start-1 col-end-8 p-3 rounded-lg">
                            <div class="flex flex-row items-center">
                                <img src="https://randomuser.me/api/portraits/thumb/women/79.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                <div class="relative ml-3 text-sm bg-white dark:bg-gray-600 py-2 px-4 shadow rounded-xl">
                                    <div>Hey, how are you doing?</div>
                                </div>
                            </div>
                        </div>
                        <!-- Outgoing Message (example) -->
                        <div class="col-start-6 col-end-13 p-3 rounded-lg">
                            <div class="flex items-center justify-start flex-row-reverse">
                                <img src="https://randomuser.me/api/portraits/thumb/men/86.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                <div class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-600 py-2 px-4 shadow rounded-xl">
                                    <div>I'm doing great, thanks for asking!</div>
                                    <div class="absolute text-xs bottom-0 right-0 -mb-5 mr-2 text-gray-500 dark:text-gray-300">12:30 PM</div>
                                </div>
                            </div>
                        </div>
                        <!-- Incoming Message with Image (example) -->
                          <div class="col-start-1 col-end-8 p-3 rounded-lg">
                            <div class="flex flex-row items-center">
                                <img src="https://randomuser.me/api/portraits/thumb/women/79.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                <div class="relative ml-3 text-sm bg-white dark:bg-gray-600 py-2 px-4 shadow rounded-xl">
                                    <div>Check this out!</div>
                                    <img src="https://picsum.photos/seed/picsum/200/300" alt="placeholder image" class="mt-2 rounded-md">
                                </div>
                            </div>
                        </div>
                        <!-- Add more messages here following the same structure -->
                    </div>
                </div>
            </div>
            <div class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-600 w-full px-4">
                <div>
                    <button class="flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.414 6.586a2 2 0 002.828 2.828l6.586-6.586m0 0a2 2 0 102.828-2.828m-8.485.071l7.071 7.071m2.121-7.071l-.707 -.707m10.607 10.607l-.707 -.707m-3.536-3.536l-.707 -.707"></path>
                        </svg>
                    </button>
                </div>
                <div class="flex-grow ml-4">
                    <div class="relative w-full">
                        <input type="text" class="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10 dark:bg-gray-700 dark:text-white">
                    </div>
                </div>
                <div class="ml-4">
                    <button class="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0">
                        <span>Send</span>
                        <span class="ml-2">
                            <svg class="w-4 h-4 transform rotate-45 -mt-px" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                            </svg>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

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.

Vorschau öffnen

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg max-w-md w-full p-4">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Chat Window</h2>
        <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white focus:outline-none">
            <span>&times;</span>
        </button>
    </div>
    <div class="flex flex-col space-y-4 overflow-y-auto h-64">
        <div class="flex items-start space-x-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
                Hello! How are you?
            </div>
        </div>
        <div class="flex items-start space-x-2 justify-end">
            <div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
                I am fine, thank you! And you?
            </div>
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
        </div>
        <div class="flex items-start space-x-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
                Doing great! Just working on some projects.
            </div>
        </div>
        <div class="flex items-start space-x-2 justify-end">
            <div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
                That sounds interesting!
            </div>
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar">
        </div>
    </div>
    <div class="mt-4">
        <input type="text" placeholder="Type your message..." class="w-full bg-gray-100 dark:bg-gray-600 border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">
    </div>
</div>

Chat-Fenster-Komponente

Eine Chat-Fenster-Komponente im Brutalismus-Stil mit hohem Kontrast, responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="max-w-lg mx-auto mt-10 p-4 bg-gray-100 rounded-lg shadow-lg dark:bg-gray-800 border-2 border-black dark:border-gray-600">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-black dark:text-white">Chat Room</h2>
        <button class="px-3 py-1 text-sm font-semibold text-white bg-blue-600 rounded hover:bg-blue-500 focus:outline-none">Join</button>
    </div>
    <div class="border-2 border-black dark:border-gray-600 h-64 overflow-y-scroll 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>
                <span class="font-bold text-black dark:text-white">John Doe:</span>
                <p class="text-black dark:text-gray-200">Hello! How is everyone?</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>
                <span class="font-bold text-black dark:text-white">Jane Smith:</span>
                <p class="text-black dark:text-gray-200">I'm doing great, thanks for asking!</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>
                <span class="font-bold text-black dark:text-white">Mike Brown:</span>
                <p class="text-black dark:text-gray-200">Excited for the weekend!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Emily White:</span>
                <p class="text-black dark:text-gray-200">Same here! Any plans?</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <textarea rows="3" class="w-full p-2 border-2 border-black dark:border-gray-600 rounded" placeholder="Type a message..."></textarea>
        <button class="mt-2 px-3 py-1 text-sm font-semibold text-white bg-green-600 rounded hover:bg-green-500 focus:outline-none">Send</button>
    </div>
</div>

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.

Vorschau öffnen

                <div class="bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Chat with Us</h1>
        <button class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 p-2 rounded-full transition duration-150">
            <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"/>
            </svg>
        </button>
    </div>
    <div class="p-4 overflow-y-auto h-64">
        <div class="flex mb-4">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/300" alt="User Avatar" />
            <div class="ml-3 bg-blue-500 text-white rounded-lg p-2 max-w-xs rounded-tr-none">
                <p>Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex mb-4 justify-end">
            <div class="ml-3 bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-white rounded-lg p-2 max-w-xs rounded-tl-none">
                <p>I have a question about my order.</p>
            </div>
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/301" alt="User Avatar" />
        </div>
        <div class="flex mb-4">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/302" alt="User Avatar" />
            <div class="ml-3 bg-blue-500 text-white rounded-lg p-2 max-w-xs rounded-tr-none">
                <p>I can help you with that!</p>
            </div>
        </div>
        <div class="flex mb-4 justify-end">
            <div class="ml-3 bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-white rounded-lg p-2 max-w-xs rounded-tl-none">
                <p>When will it be delivered?</p>
            </div>
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/303" alt="User Avatar" />
        </div>
    </div>
    <div class="flex p-4 border-t border-gray-200 dark:border-gray-700">
        <input type="text" class="flex-grow border border-gray-300 dark:border-gray-600 p-2 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 focus:border-transparent" placeholder="Type your message..." />
        <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 transition duration-150 hover:bg-blue-600">
            Send
        </button>
    </div>
</div>

Kategorien