Composant Badges
Un composant de badges polyvalent conçu pour les sites Web d’entreprise, utilisant des tons de terre dans une interface utilisateur en mode sombre pour améliorer l’expérience utilisateur. Le composant présente une réactivité avec quelques éléments interactifs.
HTML Code
<div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
<!-- Badge 1 -->
<div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Project Leader</span>
</div>
<!-- Badge 2 -->
<div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Senior Developer</span>
</div>
<!-- Badge 3 -->
<div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>UI/UX Designer</span>
</div>
<!-- Badge 4 -->
<div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Content Strategist</span>
</div>
</div>Composants associés
Insignes Skeuomorphes
Un composant Skeuomorphic Badges avec des effets réactifs et la prise en charge du thème sombre.
Composant Badges
Un composant Badges réactif conçu dans le style Glassmorphism, avec des éléments translucides ressemblant à du verre dépoli et des effets de flou, avec prise en charge du mode sombre.
Composant Badges
Un composant de badges minimaliste pour les tableaux de bord, avec des tons de terre et la prise en charge du mode sombre.