Componente de menciones de usuario
Un componente de mención de usuario receptivo diseñado para interfaces de comercio electrónico en modo oscuro, con tonos tierra y avatares de usuario de marcador de posición e imágenes de productos. Proporciona una lista de menciones sugeridas con detalles del usuario y un producto asociado, adecuado para funciones de etiquetado o colaboración.
Código 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>Componentes relacionados
Componente de menciones de usuario
Componente de menciones de usuario con estilo Glassmorphism, combinación de colores pastel y nivel de complejidad complejo para comercio electrónico, con diseño receptivo y soporte de temas oscuros, utilizando Tailwind CSS.
Componente de menciones de usuario
Un usuario con estilo Neumorphism menciona el componente que usa tonos tierra para un sitio web de portafolio, con diseño receptivo y soporte para modo oscuro.
Componente de menciones de usuario
Un usuario complejo menciona el componente para CRM/Business Tools, que presenta un esquema de color degradado púrpura/violeta y transiciones suaves. Totalmente receptivo con soporte para modo oscuro.