Insignes Composante 48
Un composant de badges conçu selon les principes de Material Design, avec des mises en page réactives et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Badges</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 1</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 2</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 3</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 4</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 5</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 6</span>
</div>
</div>
</div>Composants associés
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.
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 neumorphique conçu pour la consommation de contenu de blog avec des éléments interactifs et un design réactif prenant en charge le mode sombre.