Componente de menciones de usuario
Un usuario responsivo menciona el componente con soporte para temas oscuros y microinteracciones, diseñado para sitios web comerciales que utilizan Tailwind CSS.
Código HTML
<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>
Componentes relacionados
Componente de menciones de usuario
Un usuario skeuomórfico menciona un componente diseñado para imitar elementos del mundo real, con efectos responsivos y soporte para temas oscuros utilizando Tailwind CSS.
Componente de menciones de usuario
Un componente de mención de usuario simple y receptivo con un estilo de glassmorphism vibrante, adecuado para aplicaciones de redes sociales. Incluye soporte para modo oscuro.
Componente de menciones de usuario
Un usuario responsivo menciona el componente para plataformas inmobiliarias, con un estilo de diseño artístico/acuarela con tonos azul océano. Incluye elementos interactivos y soporte para el modo oscuro.