Componente de menciones de usuario
Un componente de menciones de usuario receptivo diseñado con estilo retro / vintage y combinación de colores análoga, compatible con el modo oscuro. Cuenta con avatares de usuario, nombres y texto de mensajes adecuados para interfaces de redes sociales.
Código HTML
<div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">John Doe</span>
<p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
<img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">Jane Smith</span>
<p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">Michael Brown</span>
<p class="text-gray-700 dark:text-gray-400">Started following you</p>
</div>
</div>
</div>
Componentes relacionados
Componente de menciones de usuario
Componente de menciones de usuario con soporte para modo oscuro, con efectos responsivos y soporte para temas oscuros. Utiliza imágenes de marcador de posición aleatorias de picsum.photos para las imágenes y randomuser.me para los avatares.
Componente de menciones de usuario
Un usuario complejo menciona el componente diseñado para paneles con soporte para modo oscuro y esquema de color triádico.
Componente de menciones de usuario
Un componente de menciones de usuario responsivo con soporte para temas oscuros, diseñado para sitios web comerciales. Presenta microinteracciones usando Tailwind CSS y un esquema de color de tono tierra.