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
RetroChatWindow
Un composant de fenêtre de chat de style rétro/vintage utilisant Tailwind CSS, avec un design réactif et une prise en charge du mode sombre. Comprend des messages et des avatars de remplacement. Pas de JavaScript.
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.
Composant de fenêtre de chat
Composant de fenêtre de chat neumorphique conçu pour les applications de commerce électronique, doté d’un mode sombre et d’un design réactif utilisant Tailwind CSS.