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.
HTML Code
<div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
#SocialLife
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
#Connections
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
#Community
</span>
</div>Related Components
Microinteractions Badges Component
A complex, responsive badges component with pastel colors, designed for consulting/services, featuring hover microinteractions and dark mode support. Each badge expands slightly on hover to reveal more context.
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.
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.