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
Composant Badges - Tableau de bord analogue 3D
Un composant de badges réactif avec une conception 3D, une palette de couleurs analogue, une complexité modérée et la prise en charge du thème sombre pour les tableaux de bord. Utilise uniquement les classes CSS Tailwind.
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.
Composant Badges
Un composant de badges réactif avec un design 3D, avec une prise en charge de la profondeur et du thème sombre. Chaque badge représente un utilisateur avec un nom, une image et une description, conçus à l’aide de Tailwind CSS.