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 conçu dans le style Brutalism avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre.
Composant de fenêtre de chat
Un composant complexe de fenêtre de chat inspiré de la 3D avec une palette forêt/vert, conçu pour les applications manufacturières/industrielles, avec réactivité et prise en charge du mode sombre.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec une palette de couleurs triadique, des micro-interactions et une prise en charge du mode sombre, conçu pour le commerce électronique. Il dispose d’un en-tête de chat, d’une liste de messages avec les messages de l’expéditeur/récepteur et d’une entrée de message.