Componente Menzioni utente
Un utente reattivo menziona un componente progettato per le interfacce di e-commerce in modalità scura, con toni della terra e avatar utente segnaposto e immagini dei prodotti. Fornisce un elenco di menzioni suggerite con i dettagli dell'utente e un prodotto associato, adatto per l'aggiunta di tag o per le funzionalità di collaborazione.
Codice HTML
<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>Componenti correlati
Componente Menzioni utente
Un componente di menzione utente semplice e reattivo con uno stile di vetromorfismo vibrante, adatto per applicazioni di social media. Include il supporto per la modalità oscura.
Componente Menzioni utente
Un componente di menzione dell'utente con design 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente Menzioni utente
Un utente in stile Neumorfismo menziona un componente che utilizza i toni della terra per un sito web di portfolio, con design reattivo e supporto per la modalità oscura.