Composant de fenêtre de chat avec conception 3D, réactivité et mode sombre
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. Comprend des avatars et des images de repère.
HTML Code
<div class="flex flex-col h-[600px] antialiased bg-gray-100 dark:bg-gray-800 relative overflow-hidden rounded-lg shadow-lg">
<!-- 3D Effect div (optional, for background depth) -->
<div class="absolute inset-0 z-0" style="background-image: linear-gradient(to bottom right, #3b82f6, #9333ea); transform: perspective(1000px) rotateY(5deg) rotateX(5deg);"></div>
<div class="flex-1 p:2 sm:p-6 flex flex-col z-10">
<div class="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-gray-200 dark:bg-gray-700 p-4 h-full">
<div class="flex flex-col h-full overflow-x-auto mb-4">
<div class="flex flex-col h-full">
<div class="grid grid-cols-12 gap-y-2">
<!-- Incoming Message (example) -->
<div class="col-start-1 col-end-8 p-3 rounded-lg">
<div class="flex flex-row items-center">
<img src="https://randomuser.me/api/portraits/thumb/women/79.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
<div class="relative ml-3 text-sm bg-white dark:bg-gray-600 py-2 px-4 shadow rounded-xl">
<div>Hey, how are you doing?</div>
</div>
</div>
</div>
<!-- Outgoing Message (example) -->
<div class="col-start-6 col-end-13 p-3 rounded-lg">
<div class="flex items-center justify-start flex-row-reverse">
<img src="https://randomuser.me/api/portraits/thumb/men/86.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
<div class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-600 py-2 px-4 shadow rounded-xl">
<div>I'm doing great, thanks for asking!</div>
<div class="absolute text-xs bottom-0 right-0 -mb-5 mr-2 text-gray-500 dark:text-gray-300">12:30 PM</div>
</div>
</div>
</div>
<!-- Incoming Message with Image (example) -->
<div class="col-start-1 col-end-8 p-3 rounded-lg">
<div class="flex flex-row items-center">
<img src="https://randomuser.me/api/portraits/thumb/women/79.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
<div class="relative ml-3 text-sm bg-white dark:bg-gray-600 py-2 px-4 shadow rounded-xl">
<div>Check this out!</div>
<img src="https://picsum.photos/seed/picsum/200/300" alt="placeholder image" class="mt-2 rounded-md">
</div>
</div>
</div>
<!-- Add more messages here following the same structure -->
</div>
</div>
</div>
<div class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-600 w-full px-4">
<div>
<button class="flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<svg class="w-5 h-5" 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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.414 6.586a2 2 0 002.828 2.828l6.586-6.586m0 0a2 2 0 102.828-2.828m-8.485.071l7.071 7.071m2.121-7.071l-.707 -.707m10.607 10.607l-.707 -.707m-3.536-3.536l-.707 -.707"></path>
</svg>
</button>
</div>
<div class="flex-grow ml-4">
<div class="relative w-full">
<input type="text" class="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10 dark:bg-gray-700 dark:text-white">
</div>
</div>
<div class="ml-4">
<button class="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0">
<span>Send</span>
<span class="ml-2">
<svg class="w-4 h-4 transform rotate-45 -mt-px" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
</svg>
</span>
</button>
</div>
</div>
</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 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.
Composant de fenêtre de chat
Un composant de fenêtre de chat simple conçu dans le style Material Design avec un thème sombre et une mise en page réactive adaptée aux interfaces de médias sociaux.