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.
HTML Code
<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>Composants associés
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 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.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif conçu avec une esthétique inspirée du papier/de l’impression, en utilisant des tons sépia/bruns. Comprend la prise en charge du mode sombre et des éléments interactifs adaptés aux plateformes de rencontres ou sociales.