User Mentions Component
User Mentions Component implementing Glassmorphism style with responsive design and dark mode support.
HTML Code
<div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
<p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
</div>
<button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
Follow
</button>
</div>Related Components
User Mentions Component
A complex, monochromatic, industrial-style user mentions component for travel/tourism websites, featuring raw materials, exposed elements, and utilitarian aesthetics. It's fully responsive and supports dark mode.
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 skeuomorphic user mentions component designed to mimic real-world elements, featuring responsive effects and dark theme support using Tailwind CSS.