Composant de fenêtre de chat
Un composant de fenêtre de chat réactif conçu selon les principes de Material Design et Tailwind CSS, avec prise en charge du mode sombre.
HTML Code
<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>×</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>Composants associés
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.
Composant de fenêtre de chat
Composant de fenêtre de chat réactif conçu pour une utilisation professionnelle, doté d’une interface utilisateur en mode sombre avec une palette de couleurs complémentaire. Comprend des messages de remplacement, une liste de contacts et une zone de saisie.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif conçu selon les principes de Material Design, avec une palette de couleurs automnale adaptée aux organisations à but non lucratif/caritatives. Comprend la prise en charge du mode sombre et des éléments interactifs tels que des bulles de message et un champ de saisie.