Composant Mentions de l’utilisateur
Un composant de mentions d’utilisateur réactif conçu pour les interfaces de commerce électronique en mode sombre, avec des tons de terre et des avatars d’utilisateurs et des images de produits. Fournit une liste de mentions suggérées avec les détails de l’utilisateur et un produit associé, adapté au balisage ou aux fonctionnalités collaboratives.
HTML Code
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Mention Users and Products</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Tag someone or an item in your comment or review.</p>
</div>
<div class="p-5">
<div class="relative mb-4">
<input type="text" placeholder="Search for users or products..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-colors duration-200">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" 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>
<ul class="space-y-4 max-h-96 overflow-y-auto custom-scrollbar">
<!-- Mention Item 1 -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@sarah.johansson</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Active Buyer, 12 Orders</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1025/60/60" alt="Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Organic Cotton Tee</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$29.99</p>
</div>
</div>
</div>
</li>
<!-- Mention Item 2 -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@mark_anderson</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Community Expert, 5 Reviews</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1040/60/60" alt="Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Handcrafted Leather Wallet</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$59.00</p>
</div>
</div>
</div>
</li>
<!-- Mention Item 3 (Product Only Example) -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/1018/60/60" alt="Placeholder Product Image">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">"The Adventurer" Backpack</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Outdoor Gear</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1015/60/60" alt="Related Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Compact Foldable Chair</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$35.50</p>
</div>
</div>
</div>
</li>
<!-- Mention Item 4 -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@eco_living</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Sustainability Advocate</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/237/60/60" alt="Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Recycled Glass Bottle</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$18.50</p>
</div>
</div>
</div>
</li>
<!-- Mention Item 5 -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@tech_gurus</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Gadget Reviewer</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/97/60/60" alt="Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Wireless Noise-Cancelling Headphones</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$199.99</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="px-5 py-4 bg-gray-100 dark:bg-gray-800 flex justify-end">
<button class="px-5 py-2 rounded-lg bg-transparent border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
Dismiss
</button>
</div>
</div>
</div>
<style>
/* Custom Scrollbar for better aesthetics and cross-browser consistency */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: #374151; /* gray-700 */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #d4d4d4;
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: #4b5563; /* gray-600 */
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #adadad;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #6b7280; /* gray-500 */
}
</style>Composants associés
Composant Mentions de l’utilisateur
Un utilisateur skeuomorphe mentionne un composant conçu pour imiter des éléments du monde réel, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateurs avec prise en charge du thème sombre, conçu pour les sites Web d’entreprise. Comprend des micro-interactions à l’aide de Tailwind CSS et d’une palette de couleurs terre.
Composant Mentions de l’utilisateur
Composant mettant en œuvre le style Glassmorphism avec un design réactif et la prise en charge du mode sombre.