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.
HTML Code
<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<!-- Badge 1 -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-teal-400 to-teal-600 text-white shadow-md dark:from-teal-600 dark:to-teal-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Completed
</span>
<!-- Badge 2 -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-red-400 to-red-600 text-white shadow-md dark:from-red-600 dark:to-red-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
Failed
</span>
<!-- Badge 3 -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-yellow-400 to-yellow-600 text-white shadow-md dark:from-yellow-600 dark:to-yellow-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Pending
</span>
<!-- Badge 4 - Example with icon and no text -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-blue-400 to-blue-600 text-white shadow-md dark:from-blue-600 dark:to-blue-800">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</span>
</div>Composants associés
Insignes Skeuomorphes
Un ensemble de badges avec un design skeuomorphe, une palette de couleurs complémentaire et une mise en page simple, adapté à un blog ou à un site de contenu. Réactif avec prise en charge du mode sombre.
Composant Badges
Un composant Badges réactif avec des micro-interactions attrayantes, conçu à l’aide de Tailwind CSS. Prend en charge le mode sombre et inclut des espaces réservés aux images.
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.