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.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:shadow-2xl">
<!-- Chat Header -->
<div class="flex items-center justify-between p-4 bg-lime-100 dark:bg-lime-800 border-b border-lime-200 dark:border-lime-700">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover border-2 border-white dark:border-gray-800 mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
<div>
<h3 class="text-lg font-semibold text-lime-800 dark:text-lime-100">Travel Agent Support</h3>
<p class="text-sm text-lime-700 dark:text-lime-200">Online</p>
</div>
</div>
<button class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-50">
<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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Chat Body -->
<div class="h-80 overflow-y-auto p-4 bg-lime-50 dark:bg-gray-700 transition-colors duration-200">
<!-- Incoming Message -->
<div class="flex items-start mb-4">
<img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
<div class="bg-white dark:bg-gray-600 p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
<p class="text-sm text-gray-800 dark:text-gray-100">Hello! How can I assist you with your travel plans today?</p>
<span class="block text-right text-xs text-gray-500 dark:text-gray-300 mt-1">10:00 AM</span>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex justify-end mb-4">
<div class="bg-lime-200 dark:bg-lime-600 p-3 rounded-tl-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
<p class="text-sm text-lime-900 dark:text-lime-50">Hi there! I'm planning a trip to Europe next summer and need some advice on itineraries.</p>
<span class="block text-left text-xs text-lime-700 dark:text-lime-200 mt-1">10:02 AM</span>
</div>
</div>
<!-- Incoming Message -->
<div class="flex items-start mb-4">
<img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
<div class="bg-white dark:bg-gray-600 p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
<p class="text-sm text-gray-800 dark:text-gray-100">Excellent! Europe offers so many possibilities. Are you looking for historical tours, scenic routes, or something more adventurous?</p>
<span class="block text-right text-xs text-gray-500 dark:text-gray-300 mt-1">10:05 AM</span>
</div>
</div>
</div>
<!-- Chat Footer (Input Area) -->
<div class="p-4 bg-lime-100 dark:bg-lime-800 border-t border-lime-200 dark:border-lime-700 flex items-center">
<input type="text" placeholder="Type your message..." class="flex-grow p-3 rounded-full border border-lime-300 dark:border-lime-600 bg-white dark:bg-lime-700 text-lime-900 dark:text-lime-50 placeholder-lime-500 dark:placeholder-lime-300 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-transparent transition-all duration-200">
<button class="ml-3 p-3 bg-lime-500 dark:bg-lime-400 text-white rounded-full hover:bg-lime-600 dark:hover:bg-lime-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-opacity-50">
<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="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
</div>
</div>Composants associés
Composant de fenêtre de chat
Un composant de fenêtre de chat complexe, de couleur triadique et axé sur la micro-interaction, adapté aux plateformes immobilières. Il dispose d’une liste de conversations, d’une zone de discussion active avec des bulles de messages et d’un champ de saisie interactif, tous entièrement réactifs et avec prise en charge du mode sombre.
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.