Composant Badges
Composant Badges - Design minimaliste / plat avec effets réactifs et prise en charge du thème sombre. Pas de JavaScript, du HTML pur et du CSS avec Tailwind.
HTML Code
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"> Badge </span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"> Large Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> Rounded Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-yellow-400" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Dot Badge
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200">
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-pink-400" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Dot Badge with long text that should wrap or truncate
</span>Composants associés
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.
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 réactifs avec le style Material Design, la prise en charge du thème sombre et la palette de couleurs Earth Tones pour le contenu du blog.