User Mentions Component
A skeuomorphic user mentions component designed to mimic real-world elements, featuring responsive effects and dark theme support using Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 max-w-xl mx-auto mt-10">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">Mentions</h2>
<div class="flex flex-col gap-3">
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">@john_doe</p>
</div>
</div>
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">@jane_smith</p>
</div>
</div>
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">Michael Johnson</p>
<p class="text-gray-600 dark:text-gray-400">@michael_j</p>
</div>
</div>
</div>
</div>Related Components
User Mentions Component
A responsive User Mentions Component with Glassmorphism design, complementary color scheme, and dark mode support, suitable for business websites.
User Mentions Component
A simple, responsive user mentions component with Skeuomorphism design, analogous color scheme, and dark mode support.
User Mentions Component
A simple, clean, and responsive user mentions component with a vibrant color scheme, designed in a Swiss/International Typography style for portfolio use. Includes dark mode support.