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 Microinteractions Badges
Un composant de badges complexe et réactif aux couleurs pastel, conçu pour le conseil/les services, avec des micro-interactions au survol et la prise en charge du mode sombre. Chaque badge s’agrandit légèrement au survol pour révéler plus de contexte.
Insignes Skeuomorphes
Un composant Skeuomorphic Badges avec des effets réactifs et la prise en charge du thème sombre.
DégradéSépiaBadges
Un composant de badge spécifique à la musique/à l’audio réactif avec des transitions dégradées sépia/marron, adapté à l’affichage de genres, d’ambiances ou de catégories d’artistes. Inclut la prise en charge du mode sombre.