Composant de fenêtre de chat
Un composant simple de fenêtre de chat avec des micro-interactions, un design réactif et une prise en charge du thème sombre, adapté aux blogs ou à la consommation de contenu.
HTML Code
<div class="flex flex-col h-screen antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200">
<div class="flex flex-row items-center justify-between flex-shrink-0 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center gap-3">
<img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<div class="font-semibold">John Doe</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Active now</div>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-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>
<div class="flex-1 p-4 overflow-y-auto">
<!-- Incoming Message -->
<div class="flex items-end mb-4">
<img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
<div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
<div>
<span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
Hey there! How are you doing?
</span>
</div>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex items-end justify-end mb-4">
<div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-1 items-end">
<div>
<span class="inline-block px-4 py-2 text-white bg-blue-500 rounded-lg">
I'm doing great, thanks for asking! How about you?
</span>
</div>
</div>
<img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 ml-3 rounded-full">
</div>
<!-- Another Incoming Message -->
<div class="flex items-end mb-4">
<img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
<div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
<div>
<span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
I'm doing good too! Just chilling and working on some projects.
</span>
</div>
</div>
</div>
</div>
<div class="flex-shrink-0 px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<div class="relative flex items-center">
<input type="text" placeholder="Type your message..." class="flex-grow w-full h-10 px-4 pr-10 text-gray-700 placeholder-gray-400 bg-gray-100 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
<button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 transform rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
</button>
</div>
</div>
</div>Composants associés
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec des micro-interactions axées sur des animations attrayantes. Il prend en charge le mode sombre et utilise Tailwind CSS pour le coiffage.
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.
Composant de fenêtre de chat
Un composant de fenêtre de chat simple, propre et fiable avec une palette de couleurs pastel, adapté aux sites Web d’entreprise ou de voyage/tourisme. Il est entièrement réactif et prend en charge le mode sombre.