Composant de fenêtre de chat
Un composant de fenêtre de chat complexe, de couleur triadique et axé sur la micro-interaction, adapté aux plateformes immobilières. Il dispose d’une liste de conversations, d’une zone de discussion active avec des bulles de messages et d’un champ de saisie interactif, tous entièrement réactifs et avec prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
<div class="relative w-full max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex flex-row-reverse transform transition-all duration-300 ease-in-out hover:shadow-2xl">
<!-- Chat Details / Active Chat Area -->
<div class="flex-1 flex flex-col h-[80vh] md:h-[calc(100vh-6rem)] lg:h-[calc(100vh-8rem)]">
<!-- Chat Header -->
<div class="flex items-center justify-between p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
<div class="flex items-center space-x-3">
<button class="md:hidden p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400 dark:focus:ring-offset-gray-800">
<svg class="w-6 h-6" 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 19l-7-7 7-7"></path></svg>
</button>
<div class="relative">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Name">
<span class="absolute bottom-0 right-0 block w-3 h-3 bg-green-500 rounded-full ring-2 ring-white dark:ring-gray-800"></span>
</div>
<div>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Online</p>
</div>
</div>
<div class="flex space-x-3">
<button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 animate-pulse-once">
<svg class="w-6 h-6" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5-2.5-2.5m-3 3l2.5 2.5m-2.5 2.5L10.5 9m-2.5 2.5L10.5 9m4.5 4.5l-2.5 2.5-2.5-2.5m3-3l-2.5 2.5m-2.5-2.5l2.5-2.5-2.5-2.5m-3-3l2.5-2.5-2.5-2.5"></path></svg>
</button>
<button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-800 animate-pulse-once">
<svg class="w-6 h-6" 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 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"></path></svg>
</button>
</div>
</div>
<!-- Chat Messages -->
<div class="flex-1 p-4 sm:p-6 overflow-y-auto custom-scrollbar-thin space-y-4 bg-gray-50 dark:bg-gray-850">
<!-- Agent Message -->
<div class="flex items-end space-x-3 group animate-slide-in-left">
<img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Avatar">
<div class="bg-green-100 dark:bg-green-700 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-gray-800 dark:text-gray-50 relative group-hover:scale-[1.02] transition-transform duration-150">
<p class="text-sm">Hello! I'm John, your agent for the property at 123 Elm St. How can I assist you today?</p>
<span class="block text-xs text-right text-gray-500 dark:text-gray-300 mt-1">10:00 AM</span>
<div class="absolute hidden group-hover:flex bottom-1 -right-8 space-x-1.5 animation-fade-in-right">
<button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
<button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
</div>
</div>
</div>
<!-- User Message -->
<div class="flex items-end justify-end space-x-3 group animate-slide-in-right">
<div class="bg-blue-500 dark:bg-blue-600 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-white relative group-hover:scale-[1.02] transition-transform duration-150">
<p class="text-sm">Hi John! I'm interested in scheduling a virtual tour for that property. When are you available?</p>
<span class="block text-xs text-right text-blue-100 dark:text-blue-200 mt-1">10:05 AM</span>
<div class="absolute hidden group-hover:flex bottom-1 -left-8 space-x-1.5 animation-fade-in-left">
<button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
<button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
</div>
</div>
<img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
</div>
<!-- Agent Message with Property Card -->
<div class="flex items-end space-x-3 group animate-slide-in-left">
<img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Avatar">
<div class="bg-green-100 dark:bg-green-700 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-gray-800 dark:text-gray-50 relative group-hover:scale-[1.02] transition-transform duration-150">
<p class="text-sm mb-2">Great! How about this Thursday at 2 PM PST? Also, here are some details about the property:</p>
<!-- Property Card in Chat -->
<div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow-md border border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row mb-2">
<img src="https://picsum.photos/300/200?random=1" alt="Property Image" class="w-full sm:w-24 md:w-32 h-24 sm:h-auto object-cover">
<div class="p-3 flex-1">
<h4 class="font-semibold text-gray-900 dark:text-gray-100 text-base">Modern Family Home</h4>
<p class="text-gray-600 dark:text-gray-300 text-sm">123 Elm St, Springfield</p>
<p class="text-pink-600 dark:text-pink-400 text-base font-bold mt-1">$550,000</p>
<button class="mt-2 text-blue-600 dark:text-blue-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 rounded-md transition-colors duration-200">View Details</button>
</div>
</div>
<span class="block text-xs text-right text-gray-500 dark:text-gray-300 mt-1">10:08 AM</span>
<div class="absolute hidden group-hover:flex bottom-1 -right-8 space-x-1.5 animation-fade-in-right">
<button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
<button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
</div>
</div>
</div>
<!-- User Message with Confirmation -->
<div class="flex items-end justify-end space-x-3 group animate-slide-in-right">
<div class="bg-blue-500 dark:bg-blue-600 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-white relative group-hover:scale-[1.02] transition-transform duration-150">
<p class="text-sm">Thursday at 2 PM works perfectly! Thank you for the property details.</p>
<span class="block text-xs text-right text-blue-100 dark:text-blue-200 mt-1">10:10 AM</span>
<div class="absolute hidden group-hover:flex bottom-1 -left-8 space-x-1.5 animation-fade-in-left">
<button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
<button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
</div>
</div>
<img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
</div>
</div>
<!-- Chat Input -->
<div class="p-4 sm:p-5 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex items-center space-x-3">
<button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 animate-jiggle">
<svg class="w-6 h-6" 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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</button>
<input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition-all duration-200 ease-in-out focus:scale-[1.01] shadow-sm">
<button class="p-3 bg-blue-500 text-white rounded-full hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95 shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-800 animate-pop-in">
<svg class="w-6 h-6" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</button>
</div>
</div>
<!-- Chat List / Sidebar -->
<div class="hidden md:flex flex-col w-72 lg:w-80 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-none h-[80vh] md:h-[calc(100vh-6rem)] lg:h-[calc(100vh-8rem)]">
<!-- Search and New Chat -->
<div class="p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
<div class="relative">
<input type="text" placeholder="Search chats..." class="w-full p-2 pl-10 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 transition-all duration-200 ease-in-out focus:scale-[1.01] shadow-sm">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<button class="mt-3 w-full bg-pink-500 text-white py-2 rounded-lg hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 transform active:scale-98 animate-button-pop">
+ New Chat
</button>
</div>
<!-- Conversations List -->
<div class="flex-1 overflow-y-auto custom-scrollbar-thin">
<a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 relative group active:bg-blue-50 dark:active:bg-blue-900 border-l-4 border-l-blue-500 dark:border-l-blue-600 animate-fade-in-up">
<img class="w-12 h-12 rounded-full object-cover border-2 border-transparent group-hover:border-blue-400 transition-colors duration-200" src="https://randomuser.me/api/portraits/men/45.jpg" alt="John Doe">
<div class="flex-1">
<h4 class="font-semibold text-gray-900 dark:text-gray-100">John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Hi! How can I assist you today?</p>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">10:10 AM</p>
<div class="absolute hidden group-hover:block right-4 top-1/2 -translate-y-1/2 transition-opacity duration-200 opacity-0 group-hover:opacity-100 animate-slide-in-right-sm">
<span class="block w-2 h-2 bg-blue-500 dark:bg-blue-600 rounded-full"></span>
</div>
</a>
<a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group animate-fade-in-up animate-delay-100">
<img class="w-12 h-12 rounded-full object-cover border-2 border-transparent group-hover:border-green-400 transition-colors duration-200" src="https://randomuser.me/api/portraits/women/24.jpg" alt="Jane Smith">
<div class="flex-1">
<h4 class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">About the property at 456 Oak Ave...</p>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
</a>
<a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-200">
<img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Robert Johnson">
<div class="flex-1">
<h4 class="font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Can we reschedule the viewing?</p>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Mon</p>
</a>
<a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-300">
<img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/77.jpg" alt="Emily White">
<div class="flex-1">
<h4 class="font-semibold text-gray-900 dark:text-gray-100">Emily White</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Looking for apartments in downtown.</p>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Last week</p>
</a>
<a href="#" class="flex items-center p-4 sm:p-5 space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-400">
<img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Agent Name">
<div class="flex-1">
<h4 class="font-semibold text-gray-900 dark:text-gray-100">Michael Brown</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">New property listed near campus!</p>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">2 weeks ago</p>
</a>
</div>
</div>
</div>
</div>
<style>
/* Custom scrollbar for better aesthetics */
.custom-scrollbar-thin::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar-thin::-webkit-scrollbar-thumb {
background-color: rgb(156 163 175 / 0.5);
border-radius: 3px;
}
.custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: rgb(156 163 175 / 0.7);
}
.custom-scrollbar-thin::-webkit-scrollbar-track {
background-color: transparent;
}
/* Dark mode scrollbar */
.dark .custom-scrollbar-thin::-webkit-scrollbar-thumb {
background-color: rgb(75 85 99 / 0.5);
}
.dark .custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: rgb(75 85 99 / 0.7);
}
/* Keyframe animations for microinteractions */
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRightSm {
from { opacity: 0; transform: translateX(-5px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeItIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulseOnce {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes jiggle {
0% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
75% { transform: rotate(-3deg); }
100% { transform: rotate(0deg); }
}
@keyframes popIn {
0% { transform: scale(0.8); opacity: 0;}
100% { transform: scale(1); opacity: 1;}
}
@keyframes buttonPop {
0% { transform: scale(1);}
20% { transform: scale(1.02);}
40% { transform: scale(0.98);}
60% { transform: scale(1.01);}
80% { transform: scale(0.99);}
100% { transform: scale(1);}
}
/* Tailwind classes for animations */
.animate-slide-in-left {
animation: slideInLeft 0.3s ease-out;
animation-fill-mode: backwards;
}
.animate-slide-in-right {
animation: slideInRight 0.3s ease-out;
animation-fill-mode: backwards;
}
.animate-slide-in-right-sm {
animation: slideInRightSm 0.2s ease-out;
animation-fill-mode: backwards;
}
.animate-fade-in-up {
animation: fadeInUp 0.3s ease-out;
animation-fill-mode: backwards;
}
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animation-fade-in-right {
animation: fadeItIn 0.2s ease-out forwards, slideInRightSm 0.2s ease-out forwards;
animation-delay: 0.1s; /* Slight delay after hover */
}
.animation-fade-in-left {
animation: fadeItIn 0.2s ease-out forwards, slideInLeftSm 0.2s ease-out forwards;
animation-delay: 0.1s; /* Slight delay after hover */
}
.animate-pulse-once {
animation: pulseOnce 0.6s ease-in-out;
}
.animate-jiggle {
animation: jiggle 0.4s ease-in-out;
}
.animate-pop-in {
animation: popIn 0.3s ease-out;
}
.animate-button-pop {
animation: buttonPop 0.5s ease-in-out;
}
/* Microinteraction for hover state on chat bubbles */
.group:hover .group-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
</style>Composants associés
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec des micro-interactions axées sur des animations attrayantes. Il prend en charge le mode sombre et utilise Tailwind CSS pour le coiffage.
Composant de fenêtre de chat
Un composant de fenêtre de chat simple, propre et fiable avec une palette de couleurs pastel, adapté aux sites Web d’entreprise ou de voyage/tourisme. Il est entièrement réactif et prend en charge le mode sombre.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif présentant un design 3D moderne avec des couleurs pastel et des fonctionnalités interactives, adapté aux affichages de portfolios.