Composant de fenêtre de chat
Un composant de fenêtre de chat simple, réactif, inspiré du Material Design avec des tons chauds de coucher de soleil, adapté aux sites Web d’entreprise et d’entreprise, prenant en charge le mode sombre.
HTML Code
<div class="flex flex-col h-[700px] w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-md lg:max-w-lg">
<!-- Header -->
<div class="flex items-center justify-between p-4 bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700 text-white shadow-md">
<div class="flex items-center space-x-3">
<img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
<div>
<h3 class="text-lg font-semibold">Olivia Martin</h3>
<p class="text-sm opacity-90">Online</p>
</div>
</div>
<button class="p-1 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Chat Messages Area -->
<div class="flex-1 p-4 overflow-y-auto bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<!-- Incoming Message -->
<div class="flex items-start mb-4">
<img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
<p class="text-sm">Hello! How can I assist you today regarding your last order?</p>
<span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:05 AM</span>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex justify-end mb-4">
<div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
<p class="text-sm">Hi Olivia, I have a question about the shipping status. My order number is #12345.</p>
<span class="block text-xs text-right text-white text-opacity-80 mt-1">10:07 AM</span>
</div>
</div>
<!-- Incoming Message -->
<div class="flex items-start mb-4">
<img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
<p class="text-sm">Certainly! Let me check that for you. Please wait a moment.</p>
<span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:08 AM</span>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex justify-end mb-4">
<div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
<p class="text-sm">Thanks!</p>
<span class="block text-xs text-right text-white text-opacity-80 mt-1">10:09 AM</span>
</div>
</div>
</div>
<!-- Message Input -->
<div class="p-4 bg-white dark:bg-gray-800 flex items-center space-x-3 border-t border-gray-200 dark:border-gray-700">
<input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 shadow-inner transition-colors duration-200">
<button class="bg-orange-500 dark:bg-orange-600 text-white p-3 rounded-full hover:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 shadow-md transition-colors duration-200">
<svg class="w-6 h-6 -rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
</button>
</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
Composant de fenêtre de chat tridimensionnel en niveaux de gris pour les tableaux de bord de complexité modérée et les fonctionnalités interactives. Conception réactive avec prise en charge du thème sombre.
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.