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é.
HTML Code
<div class="p-8 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans transition-colors duration-300">
<div class="flex flex-wrap gap-6 p-8 bg-gray-100 dark:bg-gray-800 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-4xl">
<!-- Active Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-blue-600 dark:text-blue-400
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<span class="w-2.5 h-2.5 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse"></span>
<span class="text-sm font-semibold whitespace-nowrap">Active</span>
</button>
<!-- Pending Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-yellow-600 dark:text-yellow-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Pending Review</span>
</button>
<!-- Success Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-green-600 dark:text-green-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Completed</span>
</button>
<!-- Error Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-red-600 dark:text-red-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Failed</span>
</button>
<!-- Info Badge -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-gray-700 dark:text-gray-300
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
<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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold whitespace-nowrap">Informational</span>
</button>
<!-- New Feature Badge with avatar -->
<button class="flex items-center gap-2 px-5 py-2 rounded-full
bg-gray-100 dark:bg-gray-800
text-purple-600 dark:text-purple-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-6 h-6 rounded-full object-cover shadow-md">
<span class="text-sm font-semibold whitespace-nowrap">New Update</span>
<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-200 text-purple-800
dark:bg-purple-800 dark:text-purple-200
shadow-inner">PRO</span>
</button>
<!-- Tag with image/icon -->
<button class="flex items-center gap-2 px-5 py-2 pr-3 rounded-full
bg-gray-100 dark:bg-gray-800
text-indigo-600 dark:text-indigo-400
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
<img src="https://picsum.photos/id/237/20/20" alt="Tag Icon" class="w-5 h-5 rounded-full object-cover shadow-sm">
<span class="text-sm font-semibold whitespace-nowrap">Website</span>
</button>
</div>
</div>
<style>
/* Base styles for neumorphism shadows */
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #6d6d6d, -6px -6px 12px #939393;
}
/* Inset styles for pushed/active state */
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #6d6d6d, inset -5px -5px 10px #939393;
}
/* Add a subtle animation for the active dot */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-pulse {
animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Ensure all transitions are smooth */
.transition-colors {
transition-property: background-color, color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
</style>Composants associés
Composant Badges
Un composant de badge en mode sombre réactif pour le commerce électronique, présentant divers badges avec des schémas de couleurs complémentaires et des éléments interactifs.
Composant Badges
Un composant de badges réactif avec un style Skeuomorphism, une palette de couleurs triadique et une complexité simple, conçu pour les portfolios avec prise en charge du thème sombre.
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.