Composant de fenêtre de chat
Un composant de fenêtre de chat minimaliste pour les sites de commerce électronique, doté d’une palette de couleurs en niveaux de gris, d’une complexité modérée et d’une réactivité avec prise en charge du mode sombre. Construit avec HTML et Tailwind CSS.
HTML Code
<div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900">
<!-- Chat Header -->
<header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 shadow-md">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
<h1 class="ml-3 text-lg font-semibold text-gray-800 dark:text-white">Customer Support</h1>
</div>
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</header>
<!-- Chat Body -->
<div class="flex-1 overflow-y-auto p-4 space-y-4">
<!-- Incoming Message -->
<div class="flex justify-start">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
<p>Hello! How can I help you today?</p>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex justify-end">
<div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
<p>I have a question about my order.</p>
</div>
</div>
<!-- Incoming Message with Avatar -->
<div class="flex justify-start items-start">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/thumb/women/76.jpg" alt="User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
<p>Ok, please provide your order number.</p>
</div>
</div>
<!-- Outgoing Message with Image -->
<div class="flex justify-end">
<div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
<p>Here is a screenshot:</p>
<img class="mt-2 rounded-lg" src="https://picsum.photos/id/237/200/150" alt="Order Screenshot">
</div>
</div>
</div>
<!-- Chat Footer (Input Area) -->
<footer class="flex items-center p-4 bg-white dark:bg-gray-800 shadow-md">
<input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600">
<button class="ml-4 p-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700">
Send
</button>
</footer>
</div>Composants associés
SkeuomorphicChatWindow
Un composant Web de fenêtre de chat stylisé avec Skeuomorphism et Tailwind CSS. Dispose d’une mise en page réactive, d’une prise en charge des thèmes sombres via CSS, de bulles de message arrondies, de dégradés et d’ombres pour une sensation tactile. Comprend des avatars et des images de repère. Aucun JavaScript inclus.
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.
Composant de fenêtre de chat
Composant de fenêtre de chat tridimensionnel en niveaux de gris pour les tableaux de bord de complexité modérée et les fonctionnalités interactives. Conception réactive avec prise en charge du thème sombre.