Composant Badges
Un composant de badges réactifs conçu pour les interfaces de médias sociaux, avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.
HTML Code
<div class="flex flex-wrap gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<!-- Badge Example -->
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-blue-500 text-white rounded-md shadow-lg dark:bg-blue-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">User Name</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-green-500 text-white rounded-md shadow-lg dark:bg-green-700">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">Another User</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-red-500 text-white rounded-md shadow-lg dark:bg-red-700">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">User Three</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-yellow-500 text-white rounded-md shadow-lg dark:bg-yellow-700">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">User Four</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-purple-500 text-white rounded-md shadow-lg dark:bg-purple-700">
<img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">Project One</span>
</div>
<div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-teal-500 text-white rounded-md shadow-lg dark:bg-teal-700">
<img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />
<span class="ml-2">Project Two</span>
</div>
</div>Composants associés
Composant Badges
Un composant Badges réactif avec des micro-interactions attrayantes, conçu à l’aide de Tailwind CSS. Prend en charge le mode sombre et inclut des espaces réservés aux images.
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 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.