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
Componente de menciones de usuario que implementa el estilo Glassmorphism con diseño responsivo y soporte de modo oscuro.
Componente de menciones de usuario
Un componente de menciones de usuario diseñado con microinteracciones, con efectos responsivos y compatibilidad con temas oscuros, construido con Tailwind CSS.
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.