User Mentions Component
A responsive User Mentions Component with 3D design elements, grayscale color scheme, and dark theme support for business/corporate websites. Uses Tailwind CSS and includes placeholder images/avatars.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
<div class="relative p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">User Mentions</h2>
<div class="space-y-4">
<div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Mentioned you in a comment.</p>
</div>
</div>
<div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Replied to your thread.</p>
</div>
</div>
<div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Related Components
User Mentions Component
A User Mentions Component designed with microinteractions, featuring responsive effects and dark theme support, built using Tailwind CSS.
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 simple, responsive user mentions component with Skeuomorphism design, analogous color scheme, and dark mode support.