User Mentions Component
A simple, responsive user mentions component with Skeuomorphism design, analogous color scheme, and dark mode support.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-xl">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<p class="text-gray-800 dark:text-gray-200 font-semibold text-lg">John Doe</p>
</div>
<p class="text-gray-700 dark:text-gray-300">
Mentioned you in a comment:
<span class="text-blue-600 dark:text-blue-400">@JaneSmith</span> This is a great point!
</p>
</div>Related Components
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.
User Mentions Component
A User Mentions Component using Tailwind CSS with Glassmorphism design, responsiveness, and dark theme support.
User Mentions Component
A User Mentions Component designed with a Glassmorphism style featuring frosted glass-like translucent elements with blur effects. It includes a dark theme support and is responsive, making it suitable for e-commerce websites.