Komponenten suchen

Kategorien

Komponenten Chat-Fenster

Chat-Fenster

Schnittstelle für die Kommunikation zwischen Kundenservice und Anwendern

Chat-Fenster-Komponente

Eine einfache Chat-Fenster-Komponente, die im Material Design-Stil mit einem dunklen Thema und einem responsiven Layout gestaltet wurde, das für Social-Media-Schnittstellen geeignet ist.

Offen Vorschau

                <div class="h-screen bg-gray-100 dark:bg-gray-800 flex flex-col justify-end">
    <div class="max-w-md w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4">
        <div class="flex flex-col space-y-4 overflow-y-scroll h-80">
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
                    Hello, how are you?
                </div>
            </div>
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-gray-300 text-gray-800 p-2 rounded-lg rounded-br-none">
                    I'm good, thanks! How about you?
                </div>
            </div>
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
                    I'm doing well! Ready for the weekend?
                </div>
            </div>
        </div>
        <div class="mt-4 flex">
            <input type="text" placeholder="Type your message..." class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-500">
            <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 focus:outline-none">Send</button>
        </div>
    </div>
</div>

Eine reaktionsschnelle Chat-Fensterkomponente mit Unterstützung für den Dunkelmodus, die für den geschäftlichen Einsatz mit subtilen Mikrointeraktionen entwickelt wurde. Verwendet ein monochromatisches Farbschema. Kein JavaScript erforderlich.

Offen Vorschau

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <div class="flex-1 overflow-y-auto p-4">
        <!-- Chat messages go here -->
        <div class="flex items-end mb-4">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg max-w-xs">
                <p class="text-sm">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-end justify-end mb-4">
            <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
                <p class="text-sm">I have a question about my order.</p>
            </div>
            <img class="w-8 h-8 rounded-full ml-2" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Avatar">
        </div>
        <!-- More messages -->
    </div>
    <div class="bg-white dark:bg-gray-800 p-4">
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 dark:border-gray-700 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
            <button class="ml-2 bg-blue-500 dark:bg-blue-700 text-white rounded-full p-2 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform transition duration-300 ease-in-out hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

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 Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-5">
    <div class="w-full md:w-96 bg-gray-300 dark:bg-gray-900 rounded-2xl shadow-neumorphic p-6">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
            <div class="ml-3">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400">How can we assist you today?</p>
            </div>
        </div>
        <div class="h-64 overflow-y-auto mb-4 rounded-lg bg-gray-200 dark:bg-gray-700 shadow-md p-3">
            <div class="p-2 mb-2 rounded-lg bg-white dark:bg-gray-800 shadow-neumorphic">
                <p class="text-gray-800 dark:text-gray-200">Hello! I have some questions about my order.</p>
            </div>
            <div class="p-2 mb-2 rounded-lg bg-blue-500 dark:bg-blue-700 text-white">
                <p>I can help with that!</p>
            </div>
            <div class="p-2 mb-2 rounded-lg bg-white dark:bg-gray-800 shadow-neumorphic">
                <p>When will it be shipped?</p>
            </div>
            <div class="p-2 mb-2 rounded-lg bg-blue-500 dark:bg-blue-700 text-white">
                <p>It should ship within 2-3 business days.</p>
            </div>
        </div>
        <div class="flex">
            <input type="text" placeholder="Type your message..." class="flex-grow bg-gray-200 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 p-2 rounded-l-md focus:outline-none focus:border-blue-500 dark:focus:border-blue-400">
            <button class="bg-blue-500 dark:bg-blue-700 text-white rounded-r-md px-4">Send</button>
        </div>
    </div>
</div>

<style>
    .shadow-neumorphic {
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), 
                    -8px -8px 20px rgba(255, 255, 255, 0.5);
    }
</style>

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.

Offen Vorschau

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

Chat-Fenster-Komponente

Eine dreidimensionale Graustufen-Chat-Fensterkomponente für Dashboards mit mittlerer Komplexität und interaktiven Funktionen. Responsives Design mit Unterstützung für dunkle Themen.

Offen Vorschau

                <!-- Chat Window Component (3D Grayscale, Moderate Complexity, Dashboard) -->

<div class="flex flex-col h-full bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
  <!-- Header -->
  <div class="flex items-center justify-between mb-4 pb-4 border-b border-gray-300 dark:border-gray-700">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat</h2>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <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>
  </div>

  <!-- Messages Area -->
  <div class="flex-1 overflow-y-auto space-y-4 pr-2">
    <!-- Incoming Message (3D Effect) -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Hello! This is an incoming message with a subtle 3D effect.</p>
      </div>
    </div>

    <!-- Outgoing Message (3D Effect) -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>This is an outgoing message designed with a 3D feel.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Here's another example of an incoming message.</p>
      </div>
    </div>

     <!-- Another Outgoing Message -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>And this is another outgoing message.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>
  </div>

  <!-- Input Area -->
  <div class="mt-4 pt-4 border-t border-gray-300 dark:border-gray-700 flex items-center">
    <input type="text" placeholder="Type your message..." class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
    <button class="ml-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg shadow-md dark:bg-blue-700 dark:hover:bg-blue-800">
      Send
    </button>
  </div>
</div>

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.

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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