User Mentions Component
A responsive user mentions component designed for dark mode e-commerce interfaces, featuring earth tones and placeholder user avatars and product images. Provides a list of suggested mentions with user details and an associated product, suitable for tagging or collaborative features.
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>Related Components
User Mentions Component
A responsive User Mentions Component styled with Neumorphism and Earth tones for social media networking interfaces, featuring dark theme support.
User Mentions Component
A responsive User Mentions Component with dark theme support using Tailwind CSS. No JavaScript is needed, only HTML with Tailwind classes. For dark mode, use Tailwind's dark: prefix for styling. Images are from picsum.photos and avatars from randomuser.me.
User Mentions Component
User Mentions Component with dark mode support, featuring responsive effects and dark theme support. Uses random placeholder images from picsum.photos for images and randomuser.me for avatars.