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
Memphis_Pastel_Food_Badges_Component
Un composant de badges complexe et réactif pour les sites Web de restauration, inspiré de Memphis Design avec une palette de couleurs pastel. Présente des formes géométriques, des motifs ludiques et inclut la prise en charge du mode sombre.
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 neumorphes
Une collection de badges interactifs conçus dans un style neumorphique doux, adaptés aux applications technologiques/SaaS. Dispose de couleurs neutres froides, de la prise en charge du mode sombre et de la réactivité.