Composant Badges
Un composant de badges simple et réactif avec prise en charge du mode sombre, utilisant une palette de couleurs triadique adaptée à un portfolio.
HTML Code
<div class="dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
</div>
</div>
</div>Composants associés
RetroBadges
Composant de badges rétro / vintage pour les sites Web d’entreprise / d’entreprise avec palette de couleurs complémentaire. Mise en page simple, conception réactive avec prise en charge du thème sombre. Pas de JavaScript.
Composant des badges financiers
Un composant de badges financiers au design minimaliste et plat utilisant des tons océan/bleu, adapté aux interfaces financières et bancaires. Il dispose d’un design réactif et d’une prise en charge du mode sombre.
Healthcare_Badges_Component_Bauhaus
Un composant de badges sur le thème de la santé avec un design inspiré du Bauhaus, utilisant des tons coucher de soleil/chauds. Il présente des formes géométriques et une disposition fonctionnelle, adaptées à l’affichage de l’état ou des catégories dans les applications médicales. Réactif avec prise en charge du mode sombre.