Badges Component
A responsive Badges component with engaging microinteractions, designed using Tailwind CSS. Supports dark mode and includes image placeholders.
HTML Code
<div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
<div class="relative inline-block">
<img src="https://picsum.photos/200" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
<span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-blue-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">1</span>
</div>
<div class="relative inline-block">
<img src="https://picsum.photos/201" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
<span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-green-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">2</span>
</div>
<div class="relative inline-block">
<img src="https://picsum.photos/202" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
<span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-yellow-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">3</span>
</div>
<div class="relative inline-block">
<img src="https://picsum.photos/203" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
<span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-red-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">4</span>
</div>
</div>
<style>
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
.bg-white {
background-color: #1f2937; /* Gray-800 */
}
.text-white {
color: #f9fafb; /* Gray-100 */
}
}
</style>Related Components
RetroBadges
Retro/Vintage Badges Component for Business/Corporate websites with Complementary color scheme. Simple layout, responsive design with dark theme support. No JavaScript.
Badges Component - 3D Analogous Dashboard
A responsive Badges Component with 3D design, analogous color scheme, moderate complexity, and dark theme support for dashboards. Uses Tailwind CSS classes only.