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
Badges pastel Mode sombre UI
Un composant de badges simple et réactif pour les sites Web d’entreprise, doté d’une interface utilisateur en mode sombre avec des couleurs pastel. Conçu avec Tailwind CSS, il utilise un fond sombre pour réduire la fatigue oculaire et prend en charge une mise en page réactive.
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 épuré et minimaliste conçu pour les systèmes de réservation, avec une mise en page réactive, une palette de couleurs pastel et une prise en charge du mode sombre, inspiré de la typographie suisse et internationale.