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.
HTML Code
<div class="max-w-md mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="bg-green-600 dark:bg-green-700 p-4">
<h2 class="text-white text-lg font-semibold">Chat Window</h2>
</div>
<div class="p-4">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
<p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
<p class="text-gray-800 dark:text-gray-200">I'm looking for more information about your services.</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
<p class="text-gray-800 dark:text-gray-200">Sure! Please check our portfolio.</p>
</div>
</div>
<div class="flex items-center">
<input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 shadow-sm" />
<button class="ml-2 bg-green-600 dark:bg-green-700 text-white px-4 py-2 rounded-lg shadow-lg">Send</button>
</div>
</div>
</div>Composants associés
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comporte un en-tête avec des informations sur l’utilisateur, une zone de message avec les messages entrants et sortants, et un pied de page pour taper de nouveaux messages. Les images sont des espaces réservés de picsum.photos et randomuser.me.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec prise en charge du mode sombre, conçu pour une utilisation professionnelle avec des micro-interactions subtiles. Utilise une palette de couleurs monochromatique. Aucun JavaScript n’est requis.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est requis.