Composant Badges - Mode sombre Tons de terre
Un système complexe de composants de badges conçu avec des tons de terre pour une interface de blog/contenu en mode sombre. Le composant comprend différents types de badges pour les catégories d’articles, le statut de l’utilisateur, les balises de contenu, les notifications et les indicateurs de réussite. Le tout en utilisant des couleurs naturelles de couleur terre avec prise en charge du mode sombre. Le design est entièrement réactif et s’adapte aux différentes tailles d’écran.
HTML Code
<!-- Badges Component for Dark Mode Blog with Earth Tones -->
<div class="bg-gray-900 p-6 min-h-screen text-gray-200">
<div class="max-w-6xl mx-auto space-y-8">
<!-- Badge Showcase Section -->
<section class="mb-10">
<h2 class="text-2xl font-semibold text-amber-100 mb-6 border-b border-amber-800/40 pb-2">Badge Components</h2>
<!-- Category Badges -->
<div class="mb-8">
<h3 class="text-amber-200 text-lg mb-3">Category Badges</h3>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70 hover:bg-amber-800/70 transition duration-200">Nature</span>
<span class="px-3 py-1 rounded-full text-xs font-medium bg-green-900/60 text-green-200 border border-green-800/70 hover:bg-green-800/70 transition duration-200">Environment</span>
<span class="px-3 py-1 rounded-full text-xs font-medium bg-brown-900/60 text-amber-100 border border-yellow-900/70 hover:bg-yellow-800/70 transition duration-200">Earth</span>
<span class="px-3 py-1 rounded-full text-xs font-medium bg-teal-900/60 text-teal-200 border border-teal-800/70 hover:bg-teal-800/70 transition duration-200">Science</span>
<span class="px-3 py-1 rounded-full text-xs font-medium bg-stone-800/60 text-stone-200 border border-stone-700/70 hover:bg-stone-700/70 transition duration-200">Geology</span>
</div>
</div>
<!-- Status Badges -->
<div class="mb-8">
<h3 class="text-amber-200 text-lg mb-3">Status Badges</h3>
<div class="flex flex-wrap gap-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-900/40 text-green-200 border border-green-700/50">
<div class="w-2 h-2 bg-green-400 rounded-full mr-1.5 animate-pulse"></div>Active
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-amber-900/40 text-amber-200 border border-amber-700/50">
<div class="w-2 h-2 bg-amber-400 rounded-full mr-1.5"></div>Pending
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-900/40 text-red-200 border border-red-700/50">
<div class="w-2 h-2 bg-red-400 rounded-full mr-1.5"></div>Closed
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-900/40 text-blue-200 border border-blue-700/50">
<div class="w-2 h-2 bg-blue-400 rounded-full mr-1.5"></div>In Review
</span>
</div>
</div>
<!-- Interactive Tag Badges -->
<div class="mb-8">
<h3 class="text-amber-200 text-lg mb-3">Interactive Tag Badges</h3>
<div class="flex flex-wrap gap-2">
<button class="flex items-center px-3 py-1 bg-stone-800 hover:bg-stone-700 rounded-lg text-xs font-medium text-stone-200 border border-stone-700 transition duration-200">
Forest <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
<button class="flex items-center px-3 py-1 bg-amber-900/70 hover:bg-amber-800 rounded-lg text-xs font-medium text-amber-100 border border-amber-800 transition duration-200">
Desert <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
<button class="flex items-center px-3 py-1 bg-emerald-900/70 hover:bg-emerald-800 rounded-lg text-xs font-medium text-emerald-100 border border-emerald-800 transition duration-200">
Vegetation <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<!-- Notification Badges -->
<div class="mb-8">
<h3 class="text-amber-200 text-lg mb-3">Notification Badges</h3>
<div class="flex flex-wrap gap-4">
<div class="relative inline-flex">
<button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<span class="absolute top-0 right-0 h-4 w-4 bg-amber-600 rounded-full flex items-center justify-center text-xs font-bold text-white">3</span>
</div>
<div class="relative inline-flex">
<button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<span class="absolute top-0 right-0 h-4 w-4 bg-green-700 rounded-full flex items-center justify-center text-xs font-bold text-white">2</span>
</div>
<div class="relative inline-flex">
<button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</button>
<span class="absolute top-0 right-0 h-4 w-4 bg-red-700 rounded-full flex items-center justify-center text-xs font-bold text-white">5</span>
</div>
</div>
</div>
<!-- Achievement Badges -->
<div class="mb-8">
<h3 class="text-amber-200 text-lg mb-3">Achievement Badges</h3>
<div class="flex flex-wrap gap-4">
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-lg border-2 border-amber-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
<span class="text-xs mt-1.5 font-medium text-amber-200">Gold</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-gradient-to-br from-stone-500 to-stone-700 rounded-full flex items-center justify-center shadow-lg border-2 border-stone-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
<span class="text-xs mt-1.5 font-medium text-stone-200">Silver</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-gradient-to-br from-yellow-800 to-amber-900 rounded-full flex items-center justify-center shadow-lg border-2 border-yellow-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<span class="text-xs mt-1.5 font-medium text-yellow-200">Bronze</span>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-gradient-to-br from-emerald-800 to-teal-900 rounded-full flex items-center justify-center shadow-lg border-2 border-emerald-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span class="text-xs mt-1.5 font-medium text-emerald-200">Earth</span>
</div>
</div>
</div>
</section>
<!-- Usage Example in Content Context -->
<section class="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
<h2 class="text-2xl font-semibold text-amber-100 mb-6">Implementation Example</h2>
<!-- Article Card with Badges -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-md border border-gray-700 hover:shadow-lg transition duration-300 mb-8">
<img src="https://picsum.photos/id/29/800/400" alt="Article cover" class="w-full h-56 object-cover object-center">
<div class="p-5">
<div class="flex flex-wrap gap-2 mb-3">
<span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/60 text-green-200 border border-green-800/70">Environment</span>
<span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70">Conservation</span>
<span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-green-900/40 text-green-200 border border-green-700/50">
<div class="w-1.5 h-1.5 bg-green-400 rounded-full mr-1.5"></div>New
</span>
</div>
<h3 class="text-xl font-semibold text-amber-50 mb-2">Exploring Forest Ecosystems in the Pacific Northwest</h3>
<p class="text-gray-300 mb-4">An in-depth look at the diverse ecology and conservation efforts in the temperate rainforests...</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="relative">
<img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Author avatar" class="w-8 h-8 rounded-full border border-amber-600">
<div class="absolute -bottom-1 -right-1 w-4 h-4 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-lg border border-amber-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
</div>
<div>
<p class="text-sm font-medium text-amber-100">Olivia Matthews</p>
<p class="text-xs text-gray-400">Environmental Scientist</p>
</div>
</div>
<div class="flex items-center text-gray-400 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
2.4k
<span class="mx-2">•</span>
<span class="inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
42
</span>
</div>
</div>
</div>
</div>
<!-- User Profile with Badges -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-md border border-gray-700 p-5">
<div class="flex flex-col sm:flex-row items-center sm:items-start gap-5">
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile" class="w-20 h-20 rounded-full border-2 border-amber-700 object-cover">
<div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-700 rounded-full flex items-center justify-center shadow-lg border border-green-600">
<div class="w-2.5 h-2.5 bg-green-400 rounded-full"></div>
</div>
</div>
<div class="flex-1 text-center sm:text-left">
<div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-2">
<h3 class="text-xl font-bold text-amber-50">Daniel Harrison</h3>
<div class="flex flex-wrap justify-center sm:justify-start gap-1.5">
<span class="px-2 py-0.5 rounded-md text-xs font-medium bg-emerald-900/70 text-emerald-200 border border-emerald-800">Contributor</span>
<span class="flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
Verified
</span>
</div>
</div>
<p class="text-gray-300 mb-3">Environmental journalist focused on climate change and conservation efforts around the globe.</p>
<div class="flex flex-wrap justify-center sm:justify-start gap-2 mb-3">
<div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
<span class="text-lg font-semibold text-amber-100">42</span>
<span class="text-xs text-gray-400">Articles</span>
</div>
<div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
<span class="text-lg font-semibold text-amber-100">2.1k</span>
<span class="text-xs text-gray-400">Followers</span>
</div>
<div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
<span class="text-lg font-semibold text-amber-100">186</span>
<span class="text-xs text-gray-400">Following</span>
</div>
</div>
<div class="flex flex-wrap justify-center sm:justify-start items-center gap-3">
<p class="text-sm text-gray-400">Achievements:</p>
<div class="flex space-x-1.5">
<div class="w-8 h-8 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-md border border-amber-600" title="Top Contributor">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
<div class="w-8 h-8 bg-gradient-to-br from-emerald-800 to-teal-900 rounded-full flex items-center justify-center shadow-md border border-emerald-600" title="Conservation Expert">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="w-8 h-8 bg-gradient-to-br from-stone-500 to-stone-700 rounded-full flex items-center justify-center shadow-md border border-stone-400" title="5 Year Member">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>Composants associés
Insignes de neumorphisme
Il s’agit d’un composant d’insignes de style Neumorphisme avec une palette de couleurs pastel, conçu pour un portfolio et utilisant Tailwind CSS.
Composant Badges
Un composant Badges réactif conçu avec des micro-interactions, avec une palette de couleurs complémentaires et la prise en charge du thème sombre. Idéal pour les sites Web d’entreprise et d’entreprise, ce composant comprend des animations attrayantes qui répondent aux actions de l’utilisateur. Les repères visuels mentionnés précédemment, tels que les effets de survol, améliorent l’expérience utilisateur.
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.