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.
HTML Code
<div class="bg-gray-900 text-white p-4 rounded-lg">
<h2 class="text-xl font-bold mb-4">User Mentions</h2>
<div class="space-y-4">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-gray-400 text-sm">Mentioned you in a comment</p>
</div>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-gray-400 text-sm">Mentioned you in a post</p>
</div>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
<div>
<p class="font-semibold">Peter Jones</p>
<p class="text-gray-400 text-sm">Mentioned you in a message</p>
</div>
</div>
</div>
</div>Related Components
User Mentions Component
A simple and minimalist user mentions component, with support for dark mode. Clickable user avatars and names are displayed in a flexbox layout. The component is responsive and adapts to different screen sizes.
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 complex, minimalist user mentions component designed for educational platforms, featuring a neon/electric color scheme, responsiveness, and dark mode support. It displays recent mentions with user avatars, messages, and timestamps, including a 'View All' button.