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 con estilo Neumorphism menciona el componente que usa tonos tierra para un sitio web de portafolio, con diseño receptivo y soporte para modo oscuro.
Componente de menciones de usuario
Un usuario retro-vintage menciona el componente para el comercio electrónico con colores triádicos, complejidad moderada, capacidad de respuesta y soporte para modo oscuro. Sin JavaScript.
Componente de menciones de usuario
Un componente de mención de usuario con diseño 3D, efectos responsivos y soporte de temas oscuros usando Tailwind CSS.