Badges Component - Dark Mode Earth Tones
A complex badges component system designed with earth tones for a dark mode blog/content interface. The component includes various badge types for article categories, user status, content tags, notifications, and achievement indicators. All using natural earth tone colors with dark mode support. The design is fully responsive and adapts to different screen sizes.
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>Related Components
Badges Component
A responsive Badges component with engaging microinteractions, designed using Tailwind CSS. Supports dark mode and includes image placeholders.
Badges Component
A responsive Badges Component with Skeuomorphism style, Triadic color scheme, and simple complexity, designed for portfolios with dark theme support.
Badges Component
A responsive badges component designed for social media interfaces, featuring engaging microinteractions and a complementary color scheme, supporting dark mode.