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.
HTML Code
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6">
<div class="mb-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-300 dark:border-gray-600 shadow-lg">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">Available 24/7</p>
</div>
</div>
<div class="h-64 overflow-y-auto rounded-lg border border-gray-300 dark:border-gray-600 p-4 bg-gray-50 dark:bg-gray-700 shadow-inner">
<div class="mb-2 flex items-start">
<img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
<div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
<p class="text-sm text-gray-800 dark:text-gray-200">Hello! How can I assist you today?</p>
</div>
</div>
<div class="mb-2 flex items-start justify-end">
<div class="mr-2 bg-blue-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
<p class="text-sm text-gray-800 dark:text-gray-200">I'm looking for some information on your services.</p>
</div>
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-purple-300 dark:border-gray-600">
</div>
<div class="mb-2 flex items-start">
<img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
<div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
<p class="text-sm text-gray-800 dark:text-gray-200">Sure! Here’s what you need to know...</p>
</div>
</div>
</div>
<form class="mt-4">
<div class="flex items-center border rounded-lg border-gray-300 dark:border-gray-600 overflow-hidden">
<input type="text" placeholder="Type your message..." class="flex-grow p-2 text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg focus:outline-none" />
<button type="submit" class="bg-pink-400 dark:bg-pink-600 text-white px-4 py-2 rounded-lg">Send</button>
</div>
</form>
</div>Composants associés
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.
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.