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.
Código HTML
<div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow-xl transition-transform transform hover:scale-105 dark:bg-gray-800">
<img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
<span class="inline-block bg-blue-500 text-white text-xs px-3 py-1 rounded-full shadow-md dark:bg-blue-600">
Mentioned
</span>
</div>Componentes relacionados
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.
Componente de menciones de usuario
Un usuario complejo y minimalista menciona un componente diseñado para plataformas educativas, con un esquema de color neón/eléctrico, capacidad de respuesta y compatibilidad con el modo oscuro. Muestra menciones recientes con avatares de usuario, mensajes y marcas de tiempo, incluido un botón 'Ver todo'.
Componente de menciones de usuario
Un usuario menciona el componente de un tablero, con un esquema de color monocromático, diseño simple, diseño receptivo y soporte para temas oscuros, utilizando Tailwind CSS.