Fenêtre de chat

Composant de fenêtre de chat

Un composant de fenêtre de chat simple, de style Glassmorphism, avec une palette de couleurs pastel, conçu pour la consommation de contenu. Il dispose d’une mise en page réactive et d’un support de thème sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black flex items-center justify-center p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20">
    <div class="font-sans text-gray-800 dark:text-white mb-4 text-xl font-semibold">Chat Window</div>
    <div class="space-y-4 h-64 overflow-y-auto pr-2 scrollbar-thumb-purple-300 scrollbar-track-purple-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thin">

      <!-- Incoming Message -->
      <div class="flex items-end">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-300 dark:border-gray-500"/>
        <div class="bg-purple-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">Hello! This is a simple chat message. How are you?</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:00 AM</span>
        </div>
      </div>

      <!-- Outgoing Message -->
      <div class="flex justify-end items-end">
        <div class="bg-pink-200 dark:bg-gray-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">I'm doing great, thanks for asking! This design is simple and elegant.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:05 AM</span>
        </div>
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-pink-300 dark:border-gray-500"/>
      </div>

      <!-- Incoming Message 2 -->
      <div class="flex items-end">
        <img src="https://randomuser.me/api/portraits/women/70.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-300 dark:border-gray-500"/>
        <div class="bg-purple-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">I totally agree! The Glassmorphism effect adds a nice touch.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:10 AM</span>
        </div>
      </div>

      <!-- Outgoing Message 2 -->
      <div class="flex justify-end items-end">
        <div class="bg-pink-200 dark:bg-gray-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">And the pastel colors are very soothing for reading.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:15 AM</span>
        </div>
        <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-pink-300 dark:border-gray-500"/>
      </div>

    </div>
    <div class="mt-4 flex">
      <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-lg bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-gray-500 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"/>
      <button class="ml-3 px-4 py-2 bg-purple-400 hover:bg-purple-500 dark:bg-gray-600 dark:hover:bg-gray-500 text-white rounded-lg transition duration-200 ease-in-out shadow-md">Send</button>
    </div>
  </div>
</div>

<style>
/* Custom Scrollbar for Webkit browsers */
.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-scrollbar-track-color);
  border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--tw-scrollbar-thumb-color);
  border-radius: 10px;
}

/* Define custom properties for scrollbar colors */
.scrollbar-thumb-purple-300 {
  --tw-scrollbar-thumb-color: #d1b1e8;
}

.scrollbar-track-purple-100 {
  --tw-scrollbar-track-color: #ede9fe;
}

.dark\:scrollbar-thumb-gray-600 {
  --tw-scrollbar-thumb-color: #4b5563;
}

.dark\:scrollbar-track-gray-800 {
  --tw-scrollbar-track-color: #1f2937;
}
</style>

Composant de fenêtre de chat

Un composant de fenêtre de chat réactif avec une palette de couleurs triadique, des micro-interactions et une prise en charge du mode sombre, conçu pour le commerce électronique. Il dispose d’un en-tête de chat, d’une liste de messages avec les messages de l’expéditeur/récepteur et d’une entrée de message.

Ouvrir l’aperçu

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden font-sans">

  <!-- Chat Header -->
  <div class="w-full bg-purple-600 dark:bg-purple-800 p-4 flex items-center justify-between shadow-md">
    <div class="flex items-center">
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-white animate-pulse-slow" />
      <h2 class="text-white text-lg font-semibold">Customer Support</h2>
    </div>
    <div class="relative">
      <div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0 ring-2 ring-purple-600 dark:ring-purple-800 animate-ping-slow"></div>
      <div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0"></div>
    </div>

  </div>

  <!-- Chat Messages -->
  <div class="flex-1 p-4 overflow-y-auto space-y-4 scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-gray-100 dark:scrollbar-track-gray-900">

    <!-- Receiver Message -->
    <div class="flex items-end justify-start animate-fade-in-down">
      <img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
      <div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
        <p>Hello! How can I help you today?</p>
        <span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:00 AM</span>
      </div>
    </div>

    <!-- Sender Message -->
    <div class="flex items-end justify-end animate-fade-in-up">
      <div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-right hover:scale-105">
        <p>I'm looking for information about my recent order, #12345.</p>
        <span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">10:02 AM</span>
      </div>
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
    </div>

    <!-- Receiver Message with Image -->
    <div class="flex items-end justify-start animate-fade-in-down">
      <img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
      <div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
        <p>Certainly! Could you please provide your full name and the email address associated with the order?</p>
        <img src="https://picsum.photos/id/237/200/150" alt="Order details" class="mt-2 rounded-md transition-all duration-300 ease-in-out transform hover:scale-105" />
        <span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:05 AM</span>
      </div>
    </div>

    <!-- Sender Message with Typing Indicator -->
    <div class="flex items-end justify-end animate-fade-in-up">
      <div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transform origin-bottom-right">
        <div class="flex items-center space-x-1">
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot"></span>
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-200"></span>
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-400"></span>
        </div>
        <span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">Typing...</span>
      </div>
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
    </div>

  </div>

  <!-- Message Input -->
  <div class="bg-cyan-500 dark:bg-cyan-700 p-4 flex items-center shadow-lg">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition-all duration-300 ease-in-out transform focus:scale-105" />
    <button class="ml-4 bg-blue-500 dark:bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 transform hover:scale-110 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
        <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.543 60.543 0 0018.445-8.986.75.75 0 000-1.218A60.543 60.543 0 003.478 2.405z" />
      </svg>
    </button>
  </div>

</div>

<!-- Custom Tailwind CSS for microinteractions and scrollbar styling -->
<style>
  @keyframes pulse-slow {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }

  @keyframes ping-slow {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }
    100% {
      transform: scale(2.2);
      opacity: 0;
    }
  }

  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  @keyframes slide-in-bottom {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-in-bottom {
    animation: slide-in-bottom 0.5s ease-out;
  }

  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out;
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out;
  }

  @keyframes bounce-dot {
    0%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-5px);
    }
  }

  .animate-bounce-dot {
    animation: bounce-dot 1.4s infinite ease-in-out both;
  }

  .animation-delay-200 {
    animation-delay: 0.2s;
  }

  .animation-delay-400 {
    animation-delay: 0.4s;
  }

  /* Custom Scrollbar Styles */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc; /* thumb track */
  }

  .dark .scrollbar-thin {
    scrollbar-color: #4a5568 #1a202c; /* thumb track for dark mode */
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: #f7fafc; /* Light mode track */
    border-radius: 10px;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-track {
    background: #1a202c; /* Dark mode track */
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #cbd5e0; /* Light mode thumb */
    border-radius: 10px;
    border: 2px solid #f7fafc; /* Light mode border around thumb */
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #4a5568; /* Dark mode thumb */
    border: 2px solid #1a202c; /* Dark mode border around thumb */
  }
</style>

Fenêtre de chat rétro pastel

Un composant de fenêtre de chat à thème rétro avec des couleurs pastel, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col h-screen antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="flex flex-row h-full w-full overflow-x-hidden">
    <div class="flex flex-col flex-auto h-full p-6">
      <div class="flex flex-col flex-auto flex-shrink-0 rounded-lg bg-gray-200 dark:bg-gray-800 h-full p-4">
        <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">
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Hey How are you doing today?</div>
                  </div>
                </div>
              </div>
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>
                      Wow, I'm loving this retro chat window design! The pastel colors are so calming.
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>I'm fine living large</div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Looks like something out of a late 80s computer interface. Totally tubular!</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-700 w-full px-4"
        >
          <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-800 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>
</div>

Composant de fenêtre de chat

Un composant de fenêtre de chat réactif présentant un design 3D moderne avec des couleurs pastel et des fonctionnalités interactives, adapté aux affichages de portfolios.

Ouvrir l’aperçu

                <div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6">
    <div class="mb-4 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-300 dark:border-gray-600 shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Available 24/7</p>
        </div>
    </div>
    <div class="h-64 overflow-y-auto rounded-lg border border-gray-300 dark:border-gray-600 p-4 bg-gray-50 dark:bg-gray-700 shadow-inner">
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Hello! How can I assist you today?</p>
            </div>
        </div>
        <div class="mb-2 flex items-start justify-end">
            <div class="mr-2 bg-blue-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">I'm looking for some information on your services.</p>
            </div>
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-purple-300 dark:border-gray-600">
        </div>
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Sure! Here’s what you need to know...</p>
            </div>
        </div>
    </div>
    <form class="mt-4">
        <div class="flex items-center border rounded-lg border-gray-300 dark:border-gray-600 overflow-hidden">
            <input type="text" placeholder="Type your message..." class="flex-grow p-2 text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg focus:outline-none" />
            <button type="submit" class="bg-pink-400 dark:bg-pink-600 text-white px-4 py-2 rounded-lg">Send</button>
        </div>
    </form>
</div>

Fenêtre de chat brutaliste simple

Composant de fenêtre de chat brutaliste simple en niveaux de gris pour la consommation de contenu de blog avec mode sombre et conception réactive

Ouvrir l’aperçu

                <div class="flex flex-col h-screen bg-white dark:bg-black border border-black dark:border-white">
  <!-- Chat Header -->
  <div class="flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 border-b border-black dark:border-white">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <h2 class="text-lg font-bold text-black dark:text-white">Simple Chat</h2>
    </div>
    <button class="text-black dark:text-white font-bold">X</button>
  </div>

  <!-- Chat Body -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Hey, this is a simple message.</p>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm">This is a reply message.</p>
      </div>
    </div>

    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Another simple incoming message to show the scroll.</p>
      </div>
    </div>

      <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm max-w-xs">And a longer outgoing message to test wrapping and responsiveness. It should wrap when the screen is smaller.</p>
      </div>
    </div>

  </div>

  <!-- Chat Footer -->
  <div class="flex p-4 bg-gray-200 dark:bg-gray-800 border-t border-black dark:border-white">
    <input type="text" placeholder="Type a message..." class="flex-1 p-2 rounded-lg border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400">
    <button class="ml-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-bold rounded-lg border border-black dark:border-white">Send</button>
  </div>
</div>

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

Composant de fenêtre de chat

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

Catégories