User Mentions Component
A responsive User Mentions Component styled with Neumorphism and Earth tones for social media networking interfaces, featuring dark theme support.
HTML Code
<div class="max-w-md mx-auto py-8">
<!-- Title -->
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h2>
<!-- Mentions List -->
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-5">
<div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
<div class="flex-1">
<p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-gray-500 dark:text-gray-400">@john_doe</p>
</div>
<img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
</div>
<div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
<div class="flex-1">
<p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
</div>
<img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
</div>
<div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
<img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
<div class="flex-1">
<p class="font-medium text-gray-800 dark:text-gray-200">Mike Taylor</p>
<p class="text-gray-500 dark:text-gray-400">@mike_taylor</p>
</div>
<img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
</div>
</div>
</div>Related Components
User Mentions Component
A simple, responsive user mentions component with a vibrant glassmorphism style, suitable for social media applications. Includes dark mode support.
User Mentions Component
A complex user mentions component for CRM/Business Tools, featuring a purple/violet gradient color scheme and smooth transitions. Fully responsive with dark mode support.
User Mentions Component
A retro-vintage user mentions component for e-commerce with triadic colors, moderate complexity, responsiveness, and dark mode support. No JavaScript.