Composant 50 de la fenêtre de chat
Un composant de fenêtre de chat minimaliste avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend des images d’espace réservé et des images d’avatar provenant de sources d’espace réservé aléatoires.
HTML Code
<div class="bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4">
<h1 class="text-xl font-semibold text-gray-800 dark:text-white">Chat with Us</h1>
<button class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 p-2 rounded-full transition duration-150">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M3 8a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"/>
</svg>
</button>
</div>
<div class="p-4 overflow-y-auto h-64">
<div class="flex mb-4">
<img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/300" alt="User Avatar" />
<div class="ml-3 bg-blue-500 text-white rounded-lg p-2 max-w-xs rounded-tr-none">
<p>Hello! How can I help you today?</p>
</div>
</div>
<div class="flex mb-4 justify-end">
<div class="ml-3 bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-white rounded-lg p-2 max-w-xs rounded-tl-none">
<p>I have a question about my order.</p>
</div>
<img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/301" alt="User Avatar" />
</div>
<div class="flex mb-4">
<img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/302" alt="User Avatar" />
<div class="ml-3 bg-blue-500 text-white rounded-lg p-2 max-w-xs rounded-tr-none">
<p>I can help you with that!</p>
</div>
</div>
<div class="flex mb-4 justify-end">
<div class="ml-3 bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-white rounded-lg p-2 max-w-xs rounded-tl-none">
<p>When will it be delivered?</p>
</div>
<img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/303" alt="User Avatar" />
</div>
</div>
<div class="flex p-4 border-t border-gray-200 dark:border-gray-700">
<input type="text" class="flex-grow border border-gray-300 dark:border-gray-600 p-2 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 focus:border-transparent" placeholder="Type your message..." />
<button class="bg-blue-500 text-white p-2 rounded-lg ml-2 transition duration-150 hover:bg-blue-600">
Send
</button>
</div>
</div>Composants associés
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.
Composant de fenêtre de chat
Un composant de fenêtre de chat complexe et réactif avec une esthétique de conception monospace/développeur, une palette de couleurs automnales, optimisé pour les applications de sport/fitness, y compris la prise en charge du mode sombre et des éléments interactifs.
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.