User Mentions Component
A responsive user mentions component with dark theme support and microinteractions, designed for business websites using Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 sm:px-6 lg:px-8">
<div class="max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">User Mentions</h2>
<div class="space-y-4">
<!-- Mention 1 -->
<div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">Jane Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Mentioned you in a post</p>
</div>
<div class="ml-auto">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
</div>
</div>
<!-- Mention 2 -->
<div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">John Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Replied to your comment</p>
</div>
<div class="ml-auto">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
</div>
</div>
<!-- Mention 3 -->
<div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">Jessica Williams</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Liked your photo</p>
</div>
<div class="ml-auto">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
</div>
</div>
</div>
</div>
</div>
Related Components
User Mentions Component
A user mentions component for a dashboard, featuring a monochromatic color scheme, simple layout, responsive design, and dark theme support, using Tailwind CSS.
User Mentions Component
A responsive User Mentions Component styled with Neumorphism and Earth tones for social media networking interfaces, featuring dark theme support.
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.