Rechercher des composants

Catégories

Composants Fenêtre de chat

Fenêtre de chat

Interface de communication entre le service client et les utilisateurs

Composant de fenêtre de chat

Un composant de fenêtre de chat simple conçu dans le style Material Design avec un thème sombre et une mise en page réactive adaptée aux interfaces de médias sociaux.

Ouvrir Aperçu

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

Un composant de fenêtre de chat réactif avec prise en charge du mode sombre, conçu pour une utilisation professionnelle avec des micro-interactions subtiles. Utilise une palette de couleurs monochromatique. Aucun JavaScript n’est requis.

Ouvrir Aperçu

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

Composant de fenêtre de chat

Composant de fenêtre de chat neumorphique conçu pour les applications de commerce électronique, doté d’un mode sombre et d’un design réactif utilisant Tailwind CSS.

Ouvrir Aperçu

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

Composant de fenêtre de chat

Un composant de fenêtre de chat simple conçu avec des éléments 3D, une palette de couleurs de tons de terre et une prise en charge réactive du thème sombre.

Ouvrir Aperçu

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

Composant de fenêtre de chat

Composant de fenêtre de chat tridimensionnel en niveaux de gris pour les tableaux de bord de complexité modérée et les fonctionnalités interactives. Conception réactive avec prise en charge du thème sombre.

Ouvrir Aperçu

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

Composant de fenêtre de chat

Un composant de fenêtre de chat minimaliste pour les sites de commerce électronique, doté d’une palette de couleurs en niveaux de gris, d’une complexité modérée et d’une réactivité avec prise en charge du mode sombre. Construit avec HTML et Tailwind CSS.

Ouvrir Aperçu

                <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

Un composant de fenêtre de chat de style rétro/vintage utilisant Tailwind CSS, avec un design réactif et une prise en charge du mode sombre. Comprend des messages et des avatars de remplacement. Pas de JavaScript.

Ouvrir Aperçu

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

Composant de fenêtre de chat

Un composant de fenêtre de chat réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est requis.

Ouvrir Aperçu

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

Composant de fenêtre de chat

Un composant de fenêtre de chat réactif avec des micro-interactions axées sur des animations attrayantes. Il prend en charge le mode sombre et utilise Tailwind CSS pour le coiffage.

Ouvrir Aperçu

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

Composant de fenêtre de chat

Un composant de fenêtre de chat réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comporte un en-tête avec des informations sur l’utilisateur, une zone de message avec les messages entrants et sortants, et un pied de page pour taper de nouveaux messages. Les images sont des espaces réservés de picsum.photos et randomuser.me.

Ouvrir Aperçu

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