Komponenten suchen

Kategorien

Komponenten Chat-Fenster

Chat-Fenster

Schnittstelle für die Kommunikation zwischen Kundenservice und Anwendern

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 Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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