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.
HTML Code
<div class="flex flex-wrap justify-center p-6 bg-white dark:bg-gray-800">
<div class="m-4">
<div class="bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200 px-4 py-2 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
<span>Author: John Doe</span>
</div>
</div>
<div class="m-4">
<div class="bg-brown-200 dark:bg-brown-600 text-brown-800 dark:text-brown-200 px-4 py-2 rounded-full shadow-md">
<img src="https://picsum.photos/40/40?random=1" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
<span>Category: Nature</span>
</div>
</div>
<div class="m-4">
<div class="bg-amber-200 dark:bg-amber-600 text-amber-800 dark:text-amber-200 px-4 py-2 rounded-full shadow-md">
<img src="https://picsum.photos/40/40?random=2" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
<span>Tag: Environment</span>
</div>
</div>
<div class="m-4">
<div class="bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 px-4 py-2 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
<span>Contributor: Jane Smith</span>
</div>
</div>
</div>Composants associés
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 simple de badges de style Glassmorphism pour les réseaux sociaux, avec des effets de verre dépoli avec du flou, des couleurs analogues et la prise en charge du mode sombre à l’aide de Tailwind CSS. Il est réactif et utilise picsum.photos pour les images et randomuser.me pour les avatars si nécessaire. Aucun JavaScript n’est inclus.
Composant Badges
Un composant de badges neumorphes avec une palette de couleurs analogue pour un site Web de blog/contenu. Il dispose d’un design réactif et d’un support de thème sombre, en utilisant uniquement HTML et Tailwind CSS.