Componente de menciones de usuario
Un simple componente de menciones de usuario diseñado en un estilo brutalista con un esquema de color en escala de grises, adecuado para sitios web comerciales y corporativos. Incluye menciones de usuarios con avatares y es responsivo con soporte para temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-black dark:text-white">User Mentions</h2>
<ul class="mt-4 space-y-4">
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<p class="text-gray-800 dark:text-gray-200">@john_doe</p>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<p class="text-gray-800 dark:text-gray-200">@jane_smith</p>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<p class="text-gray-800 dark:text-gray-200">@mark_twain</p>
</li>
</ul>
<button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-white text-white dark:text-gray-800 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none">See More Mentions</button>
</div>
Componentes relacionados
Componente de menciones de usuario
Un usuario complejo inspirado en 3D menciona un componente con colores otoñales, adecuado para marcas de moda / belleza. Cuenta con avatares de usuario, nombres, roles y un recuento de menciones, con capacidad de respuesta completa y compatibilidad con el modo oscuro.
Componente de menciones de usuario
Un usuario responsivo menciona un componente diseñado para el modo oscuro con soporte CSS de Tailwind.
Componente de menciones de usuario
Un componente de menciones de usuario receptivo con neumorfismo y tonos tierra para interfaces de redes sociales, con soporte para temas oscuros.