Badges Component
A retro-themed badges component with a grayscale color scheme, suitable for a blog or content site. It features multiple interactive elements and full responsiveness, with dark mode support. The design avoids JavaScript, relying solely on HTML and Tailwind CSS.
HTML Code
<div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8 text-center">Featured Badges</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Badge 1: New Post -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-black text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
NEW POST
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Golden Age of Pixels</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore how pixel art defined an era and continues to inspire.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<svg class="w-4 h-4 mr-1" 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>2 days ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-12">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">RETRO</span>
</div>
</div>
<!-- Badge 2: Editor's Pick -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-gray-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
EDITOR'S PICK
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Tech Revival</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Diving deep into the resurgence of classic gadgets.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<svg class="w-4 h-4 mr-1" 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>1 week ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-12">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">CLASSIC</span>
</div>
</div>
<!-- Badge 3: Trending Topic -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-gray-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
TRENDING
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Future is Analog</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Why analog experiences are making a comeback in a digital world.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<svg class="w-4 h-4 mr-1" 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>3 days ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-6">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">POPULAR</span>
</div>
</div>
<!-- Badge 4: Deep Dive -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-blue-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
DEEP DIVE
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Lost Media Found</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Uncovering the mysteries of media long thought to be gone forever.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<svg class="w-4 h-4 mr-1" 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>1 month ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-8">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">ARCHIVE</span>
</div>
</div>
<!-- Badge 5: Community Spotlight -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-purple-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
COMMUNITY
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Our Favorite Fan Theories</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Exploring the most imaginative theories from our dedicated readers.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<svg class="w-4 h-4 mr-1" 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>2 weeks ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-15">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">FAN</span>
</div>
</div>
<!-- Badge 6: Retrospective -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-red-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
RETROSPECTIVE
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Gaming Consoles: A Look Back</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Tracing the evolution of gaming from 8-bit to beyond.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<svg class="w-4 h-4 mr-1" 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>3 weeks ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-9">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">OLD</span>
</div>
</div>
</div>
</div>
</div>Related Components
Badges Component
A simple Glassmorphism-styled badges component for social media, featuring frosted glass effects with blur, analogous colors, and dark mode support using Tailwind CSS. It's responsive and uses picsum.photos for images and randomuser.me for avatars where necessary. No JavaScript is included.
Badges Component
A responsive badges component designed with a 3D style using Earth tones, featuring interactive elements suitable for a dashboard.
Badges Component
A Neumorphic Badges Component with Analogous color scheme for a Blog/Content website. It features a responsive design and dark theme support, using only HTML and Tailwind CSS.