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