Composant de fenêtre de chat
Un composant complexe de fenêtre de chat inspiré de la 3D avec une palette forêt/vert, conçu pour les applications manufacturières/industrielles, avec réactivité et prise en charge du mode sombre.
HTML Code
<div class="flex h-screen w-full bg-gradient-to-br from-green-50 to-green-100 p-4 dark:from-gray-900 dark:to-gray-800 lg:p-8">
<div class="relative flex w-full max-w-7xl mx-auto overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-gray-800 lg:flex-row flex-col">
<!-- Left Sidebar - Contacts/Channels -->
<div class="relative w-full lg:w-1/4 bg-gradient-to-b from-green-600 to-green-700 p-6 shadow-inner-xl dark:from-green-900 dark:to-green-800 flex flex-col overflow-hidden transform perspective-1000 rotateY-minus-2deg origin-left transition duration-700 hover:rotateY-0 lg:transform-none">
<div class="absolute inset-0 bg-pattern-grid opacity-10 pointer-events-none"></div>
<div class="flex items-center justify-between mb-6 pb-4 border-b border-green-500 dark:border-green-700 z-10">
<h2 class="text-2xl font-bold text-white shadow-text-sm">Contacts</h2>
<button class="p-2 rounded-full bg-green-500 text-white hover:bg-green-400 dark:bg-green-700 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400"><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="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg></button>
</div>
<div class="mb-6 z-10">
<div class="relative flex items-center">
<input type="text" placeholder="Search..." class="w-full p-3 pl-10 rounded-full bg-green-500 bg-opacity-70 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-opacity-100 dark:bg-green-700 dark:bg-opacity-70 dark:focus:ring-green-600 dark:focus:bg-opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 text-white h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</div>
</div>
<div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar z-10 pt-2">
<!-- Contact Item -->
<div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<div class="ml-4 flex-1">
<p class="text-lg font-semibold text-white shadow-text-sm">John Doe</p>
<p class="text-white text-sm opacity-80 truncate">Ok, the new batch is ready...</p>
</div>
<span class="text-xs text-white opacity-70 ml-2">11:30 AM</span>
</div>
<!-- Active Contact Item -->
<div class="flex items-center p-3 rounded-xl bg-green-400 bg-opacity-70 border border-green-300 dark:bg-green-600 dark:bg-opacity-70 transform translateZ-20 shadow-lg">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<div class="ml-4 flex-1">
<p class="text-lg font-bold text-white shadow-text-sm">Jane Smith</p>
<p class="text-white text-sm opacity-90 truncate">Confirmed order #123.</p>
</div>
<span class="text-xs text-white font-medium ml-2">Now</span>
</div>
<div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
<img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<div class="ml-4 flex-1">
<p class="text-lg font-semibold text-white shadow-text-sm">Robert Garcia</p>
<p class="text-white text-sm opacity-80 truncate">Machine A-3 needs maintenance.</p>
</div>
<span class="text-xs text-white opacity-70 ml-2">Yesterday</span>
</div>
<div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<div class="ml-4 flex-1">
<p class="text-lg font-semibold text-white shadow-text-sm">Emily White</p>
<p class="text-white text-sm opacity-80 truncate">About the next production run...</p>
</div>
<span class="text-xs text-white opacity-70 ml-2">Fri</span>
</div>
</div>
</div>
<!-- Right Chat Area -->
<div class="relative flex-1 flex flex-col bg-green-50 bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60 p-6 transform translateZ-10 transition-transform duration-700 hover:translateZ-20 lg:transform-none">
<div class="absolute inset-0 bg-texture-subtle opacity-10 pointer-events-none"></div>
<!-- Chat Header -->
<div class="flex items-center justify-between pb-4 border-b border-green-200 dark:border-gray-600 mb-6 z-10">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-14 h-14 rounded-full border-2 border-green-500 dark:border-green-400 shadow-lg">
<div class="ml-4">
<h3 class="text-xl font-bold text-green-800 dark:text-white">Jane Smith</h3>
<p class="text-green-600 dark:text-green-300 text-sm">Online <span class="text-green-500 dark:text-green-400 text-xs">(Production Manager)</span></p>
</div>
</div>
<div class="flex space-x-3">
<button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-200">
<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="M3 5v10a2 2 0 002 2h2v4l4-4h4a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2zM7 7h10M7 11h10M7 15h6" /></svg>
</button>
<button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-200">
<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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg>
</button>
</div>
</div>
<!-- Chat Messages -->
<div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar z-10 pt-2">
<!-- Received Message -->
<div class="flex items-end">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border border-green-300 shadow-md">
<div class="max-w-[70%] bg-white p-4 rounded-tl-xl rounded-tr-xl rounded-br-xl shadow-lg border border-green-200 dark:bg-gray-600 dark:border-gray-500 transform translateZ-5">
<p class="text-sm text-gray-700 dark:text-gray-200">Good morning, John. The new batch of components for the A-series assembly line is ready for inspection. We've just completed the QC checks.</p>
<span class="block text-right text-xs text-gray-500 mt-2 dark:text-gray-400">10:45 AM</span>
</div>
</div>
<!-- Sent Message -->
<div class="flex justify-end">
<div class="max-w-[70%] bg-green-500 text-white p-4 rounded-tl-xl rounded-tr-xl rounded-bl-xl shadow-lg border border-green-400 dark:bg-green-700 dark:border-green-600 transform translateZ-5">
<p class="text-sm">Excellent! Please send over the inspection report and high-res photos. I'll need to forward it to the clients by end of day.</p>
<span class="block text-right text-xs text-white opacity-80 mt-2">10:48 AM</span>
</div>
</div>
<!-- Received Message with Image -->
<div class="flex items-end">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border border-green-300 shadow-md">
<div class="max-w-[70%] bg-white p-3 rounded-tl-xl rounded-tr-xl rounded-br-xl shadow-lg border border-green-200 dark:bg-gray-600 dark:border-gray-500 transform translateZ-5">
<p class="text-sm text-gray-700 mb-2 dark:text-gray-200">Here's a preview of the report and some detailed shots:</p>
<img src="https://picsum.photos/400/250?random=1" alt="Factory Image" class="w-full rounded-lg mb-2 shadow-md">
<img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="w-full rounded-lg shadow-md">
<span class="block text-right text-xs text-gray-500 mt-2 dark:text-gray-400">10:55 AM</span>
</div>
</div>
<!-- Sent Message -->
<div class="flex justify-end">
<div class="max-w-[70%] bg-green-500 text-white p-4 rounded-tl-xl rounded-tr-xl rounded-bl-xl shadow-lg border border-green-400 dark:bg-green-700 dark:border-green-600 transform translateZ-5">
<p class="text-sm">Looks good, Jane. The precision on these is impeccable. Great work by the team!</p>
<span class="block text-right text-xs text-white opacity-80 mt-2">10:58 AM</span>
</div>
</div>
</div>
<!-- Chat Input -->
<div class="mt-6 pt-4 border-t border-green-200 dark:border-gray-600 flex items-center space-x-3 z-10">
<button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-200">
<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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13.5" /></svg>
</button>
<input type="text" placeholder="Type your message..." class="flex-1 p-4 rounded-full bg-green-100 border border-green-300 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400 transform translateZ-5">
<button class="p-3 rounded-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-10 hover:translateZ-20 transition duration-200">
<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="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
</button>
<button class="p-3 rounded-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-10 hover:translateZ-20 transition duration-200">
<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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
</button>
</div>
</div>
</div>
</div>
<style>
/* Define CSS variables for easier theme switching if needed (though Tailwind dark: handles most) */
:root {
--green-primary: #34d399; /* emerald-500 */
--green-dark: #059669; /* emerald-600 */
--green-light: #a7f3d0; /* emerald-200 */
}
.dark {
--green-primary: #10b981; /* emerald-600 */
--green-dark: #065f46; /* emerald-800 */
--green-light: #047857; /* emerald-700 */
}
/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(var(--green-light-rgb, 240, 253, 244), 0.3); /* green-100 with opacity */
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: rgba(var(--gray-700-rgb, 55, 65, 81), 0.3);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: var(--green-dark);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.2);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: var(--green-primary);
}
/* 3D Effects */
.perspective-1000 {
perspective: 1000px;
}
.rotateY-minus-2deg {
transform: rotateY(-2deg); /* Initial slight rotation for 3D depth */
}
.shadow-inner-xl {
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.dark .shadow-inner-xl {
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.shadow-text-sm {
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}
/* Pseudo 3D transforms */
.transform {
transform-style: preserve-3d;
}
.translateZ-5 {
transform: translateZ(5px);
}
.hover\:translateZ-10:hover {
transform: translateZ(10px);
}
.translateZ-1_5-2deg { /* for active contact */
transform: translateZ(20px);
}
.translateZ-10 {
transform: translateZ(10px);
}
.hover\:translateZ-20:hover {
transform: translateZ(20px);
}
/* Background Patterns for 3D depth */
.bg-pattern-grid {
background-image: linear-gradient(0deg, transparent 24%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) 76%, transparent 77%, transparent);
background-size: 50px 50px;
}
.bg-texture-subtle {
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239e9e9e' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z' /%3E%3C/g%3E%3C/svg%3E");
}
.dark .bg-texture-subtle {
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234a4a4a' fill-opacity='0.25' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z' /%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 1023px) {
/* For smaller screens, remove 3D rotation and flatten perspective */
.lg\:transform-none {
transform: none !important;
perspective: none !important;
}
.lg\:w-1\/4 {
width: 100%;
height: 300px; /* Limit height of sidebar on smaller screens */
}
.lg\:flex-col {
flex-direction: column;
}
}
</style>Composants associés
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 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
Un composant de fenêtre de chat conçu dans le style Brutalism avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre.