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 et moderne avec une esthétique de conception 3D, une palette de couleurs neutres chaudes et une prise en charge complète du mode sombre, adapté aux applications technologiques/SaaS.
Composant de fenêtre de chat
Un composant de fenêtre de chat simple et réactif avec une esthétique inspirée du cyberpunk et des tons de terre naturels, conçu pour les forums et les plateformes communautaires. Inclut la prise en charge du mode sombre.