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 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 - Skeuomorphism
User mentions component with skeuomorphism design, responsive effects and dark theme support using only html with tailwind css. No javascript needed.
User Mentions Component
A retro-vintage user mentions component for e-commerce with triadic colors, moderate complexity, responsiveness, and dark mode support. No JavaScript.