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.
HTML Code
<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>Composants associés
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.
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.