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
Menciones de usuario Componente 15
Un componente web que muestra las menciones del usuario en un estilo de Material Design, con efectos responsivos y compatibilidad con temas oscuros.
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.
Componente de menciones de usuario
Un componente de menciones de usuario receptivo con elementos de diseño 3D, combinación de colores en escala de grises y soporte de temas oscuros para sitios web comerciales / corporativos. Utiliza Tailwind CSS e incluye imágenes/avatares de marcador de posición.