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
Composant Badges de produits e-commerce
Il s’agit d’un composant complexe de badges de produits e-commerce avec une utilisation intensive de dégradés de couleurs d’une palette forêt/vert, des transitions fluides et un design réactif avec prise en charge du mode sombre. Convient pour présenter l’état des produits, les offres ou les catégories.
Insignes de neumorphisme
Il s’agit d’un composant d’insignes de style Neumorphisme avec une palette de couleurs pastel, conçu pour un portfolio et utilisant Tailwind CSS.
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.