Componente de menciones de usuario
Un componente de mención de usuario simple y minimalista, con soporte para el modo oscuro. Los avatares y nombres de usuario en los que se puede hacer clic se muestran en un diseño de caja flexible. El componente es responsive y se adapta a diferentes tamaños de pantalla.
Código HTML
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Mentioned Users</h3>
<div class="flex flex-wrap gap-4">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">John Doe</a>
</div>
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Jane Smith</a>
</div>
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Peter Jones</a>
</div>
</div>
</div>Componentes relacionados
Componente de menciones de usuario
Un usuario complejo y receptivo menciona el componente para plataformas educativas con un estilo artístico/acuarela, un esquema de color neutro fresco y compatible con el modo oscuro. Cuenta con avatares de usuario, nombres, roles y un sutil efecto de fondo de acuarela.
Componente de menciones de usuario
Un componente de mención de usuario receptivo diseñado para interfaces de comercio electrónico en modo oscuro, con tonos tierra y avatares de usuario de marcador de posición e imágenes de productos. Proporciona una lista de menciones sugeridas con detalles del usuario y un producto asociado, adecuado para funciones de etiquetado o colaboración.
Componente de menciones de usuario
Un componente de menciones de usuario receptivo con diseño de Glassmorphism, combinación de colores complementaria y compatibilidad con modo oscuro, adecuado para sitios web comerciales.