Composant Mentions de l’utilisateur
Composant mettant en œuvre le style Glassmorphism avec un design réactif et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Mentions de l’utilisateur
Composant avec le style Glassmorphism, la palette de couleurs pastel et le niveau de complexité complexe pour le commerce électronique, avec un design réactif et une prise en charge du thème sombre, à l’aide de Tailwind CSS.
Composant Mentions de l’utilisateur
Un utilisateur skeuomorphe mentionne un composant conçu pour imiter des éléments du monde réel, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Mentions de l’utilisateur
Un composant de mentions d’utilisateur réactif conçu pour les interfaces de commerce électronique en mode sombre, avec des tons de terre et des avatars d’utilisateurs et des images de produits. Fournit une liste de mentions suggérées avec les détails de l’utilisateur et un produit associé, adapté au balisage ou aux fonctionnalités collaboratives.