Composant Badges
Un composant de badges réactifs avec prise en charge des micro-interactions et des thèmes sombres, conçu à l’aide de Tailwind CSS. Ce composant inclut des effets de survol et utilise des images d’espace réservé pour les avatars.
HTML Code
<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
<div class="transition-transform transform hover:scale-110 bg-blue-500 dark:bg-blue-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge One
</div>
<div class="transition-transform transform hover:scale-110 bg-green-500 dark:bg-green-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Two
</div>
<div class="transition-transform transform hover:scale-110 bg-yellow-500 dark:bg-yellow-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Three
</div>
<div class="transition-transform transform hover:scale-110 bg-red-500 dark:bg-red-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Four
</div>
<div class="transition-transform transform hover:scale-110 bg-purple-500 dark:bg-purple-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Badge Five
</div>
</div>Composants associés
Composant Badges
Un composant de badges neumorphique conçu pour la consommation de contenu de blog avec des éléments interactifs et un design réactif prenant en charge le mode sombre.
Composant Badges
Un composant Badges réactif conçu avec des micro-interactions, avec une palette de couleurs complémentaires et la prise en charge du thème sombre. Idéal pour les sites Web d’entreprise et d’entreprise, ce composant comprend des animations attrayantes qui répondent aux actions de l’utilisateur. Les repères visuels mentionnés précédemment, tels que les effets de survol, améliorent l’expérience utilisateur.
Badges pastel Mode sombre UI
Un composant de badges simple et réactif pour les sites Web d’entreprise, doté d’une interface utilisateur en mode sombre avec des couleurs pastel. Conçu avec Tailwind CSS, il utilise un fond sombre pour réduire la fatigue oculaire et prend en charge une mise en page réactive.