3D_Badge_Component
Un composant de badge simple et réactif inspiré de la 3D pour le blog/le contenu, avec des couleurs très contrastées et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
<div class="max-w-xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Badge 1: Category -->
<div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
border border-gray-200 dark:border-gray-700
before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-purple-500 before:to-pink-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
hover:before:opacity-100 group">
<span class="relative z-10 px-3 py-1 text-sm font-semibold
text-purple-700 dark:text-purple-300
group-hover:text-white dark:group-hover:text-white
transition-colors duration-300 ease-in-out">
Category
</span>
</div>
<!-- Badge 2: Featured -->
<div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
border border-gray-200 dark:border-gray-700
before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-blue-500 before:to-green-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
hover:before:opacity-100 group">
<span class="relative z-10 px-3 py-1 text-sm font-semibold
text-blue-700 dark:text-blue-300
group-hover:text-white dark:group-hover:text-white
transition-colors duration-300 ease-in-out">
Featured
</span>
</div>
<!-- Badge 3: New -->
<div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
border border-gray-200 dark:border-gray-700
before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-red-500 before:to-orange-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
hover:before:opacity-100 group">
<span class="relative z-10 px-3 py-1 text-sm font-semibold
text-red-700 dark:text-red-300
group-hover:text-white dark:group-hover:text-white
transition-colors duration-300 ease-in-out">
New
</span>
</div>
<!-- Badge 4: Popular -->
<div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
border border-gray-200 dark:border-gray-700
before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-yellow-500 before:to-lime-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
hover:before:opacity-100 group">
<span class="relative z-10 px-3 py-1 text-sm font-semibold
text-yellow-700 dark:text-yellow-300
group-hover:text-white dark:group-hover:text-white
transition-colors duration-300 ease-in-out">
Popular
</span>
</div>
<!-- Badge 5: Trending -->
<div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
border border-gray-200 dark:border-gray-700
before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-cyan-500 before:to-emerald-500 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
hover:before:opacity-100 group">
<span class="relative z-10 px-3 py-1 text-sm font-semibold
text-cyan-700 dark:text-cyan-300
group-hover:text-white dark:group-hover:text-white
transition-colors duration-300 ease-in-out">
Trending
</span>
</div>
<!-- Badge 6: Draft -->
<div class="relative flex items-center justify-center p-2 rounded-lg shadow-md bg-white dark:bg-gray-800
transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg
border border-gray-200 dark:border-gray-700
before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-gray-400 before:to-gray-600 before:opacity-0 before:transition-opacity before:duration-300 before:ease-in-out
hover:before:opacity-100 group">
<span class="relative z-10 px-3 py-1 text-sm font-semibold
text-gray-600 dark:text-gray-400
group-hover:text-white dark:group-hover:text-white
transition-colors duration-300 ease-in-out">
Draft
</span>
</div>
</div>
</div>Composants associés
Insignes Skeuomorphes
Un composant Skeuomorphic Badges avec des effets réactifs et la prise en charge du thème sombre.
OrganicNatureInspiredBadges
Un composant de badges de complexité modérée avec des lignes fluides inspirées de la nature et une palette de couleurs triadique, adapté à un portfolio pour présenter des travaux ou des produits. Il inclut la réactivité et la prise en charge du mode sombre.
Composant Badges
Un composant de badges réactifs conçu avec un style 3D utilisant des tons Terre, avec des éléments interactifs adaptés à un tableau de bord.