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
Componente de menciones de usuario con estilo Glassmorphism, combinación de colores pastel y nivel de complejidad complejo para comercio electrónico, con diseño receptivo y soporte de temas oscuros, utilizando Tailwind CSS.
Componente de menciones de usuario
Componente de menciones de usuario con soporte para modo oscuro, con efectos responsivos y soporte para temas oscuros. Utiliza imágenes de marcador de posición aleatorias de picsum.photos para las imágenes y randomuser.me para los avatares.
Componente de menciones de usuario
Un componente de menciones de usuario responsivo con soporte para temas oscuros que usa Tailwind CSS. No se necesita JavaScript, solo HTML con clases Tailwind. Para el modo oscuro, usa el prefijo dark: de Tailwind para el estilo. Las imágenes son de picsum.photos y los avatares de randomuser.me.