Search Components

Chat Window

Interface for communication between customer service and users

SkeuomorphicChatWindow

A chat window web component styled with Skeuomorphism and Tailwind CSS. Features responsive layout, dark theme support via CSS, rounded message bubbles, gradients, and shadows for a tactile feel. Includes placeholder avatars and images. No JavaScript included.

Open Preview

                <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 Window Component with 3D Design, Responsiveness, and Dark Mode

A responsive chat window component with 3D design elements and dark theme support using Tailwind CSS. Includes placeholder avatars and images.

Open Preview

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

A responsive chat window component styled with Material Design principles and Tailwind CSS, featuring dark mode support.

Open Preview

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

A Chat Window Component designed in Brutalism style with high contrast, responsive effects, and dark theme support.

Open Preview

                <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 Window Component 50

A minimalist chat window component featuring responsive design and dark mode support using Tailwind CSS. It includes placeholder images and avatar images from random placeholder sources.

Open Preview

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

Search Components

Categories

Chat Window

SkeuomorphicChatWindow

Chat Window Component with 3D Design, Responsiveness, and Dark Mode

Chat Window Component

Chat Window Component

Chat Window Component 50