Componente de menciones de usuario
Componente de menciones de usuario que implementa el estilo Glassmorphism con diseño responsivo y soporte de modo oscuro.
Código HTML
<div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
<p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
</div>
<button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
Follow
</button>
</div>Componentes relacionados
Componente de menciones de usuario
Un componente de mención de usuario simple y minimalista para blogs y consumo de contenido, con un diseño receptivo con soporte para temas oscuros.
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.
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.