Glassmorphism Tag Cloud Component
A glassmorphism-style tag cloud component with purple/violet color scheme, suitable for portfolios. Features frosted translucent elements, responsive design, and dark mode support.
HTML Code
<div class="p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen bg-gradient-to-br from-purple-100 via-violet-200 to-indigo-100 dark:from-purple-950 dark:via-violet-900 dark:to-indigo-950 flex items-center justify-center font-sans">
<div class="relative w-full max-w-4xl p-6 md:p-8 lg:p-10 rounded-3xl overflow-hidden shadow-xl
bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg border border-opacity-30 border-white
dark:bg-purple-900 dark:bg-opacity-20 dark:border-purple-700 dark:border-opacity-30
transition-all duration-500 ease-in-out transform hover:scale-[1.01]">
<!-- Glassy Overlay for more depth -->
<div class="absolute inset-0 pointer-events-none rounded-3xl
bg-gradient-to-br from-white to-transparent opacity-10
dark:from-purple-800 dark:to-transparent dark:opacity-10">
</div>
<h2 class="relative z-10 text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-900 dark:text-violet-200 mb-6 text-center
drop-shadow-lg [text-shadow:_0_2px_8px_rgb(0_0_0_/_0.1)] dark:[text-shadow:_0_2px_8px_rgb(128_0_128_/_0.3)] transition-colors duration-300">
My Skillset & Interests
</h2>
<p class="relative z-10 text-lg sm:text-xl text-purple-800 dark:text-violet-300 mb-8 text-center max-w-2xl mx-auto
opacity-90 leading-relaxed transition-colors duration-300">
Explore the diverse range of technologies and domains I'm passionate about.
</p>
<div class="relative z-10 flex flex-wrap justify-center gap-3 sm:gap-4 lg:gap-5">
<!-- Example Tags -->
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">TailwindCSS</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">React.js</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Node.js</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">TypeScript</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">MongoDB</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Express.js</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">RESTful APIs</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Git & GitHub</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Responsive Design</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">UI/UX Principles</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Agile Methodologies</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Problem Solving</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<!-- More tags if needed -->
</div>
</div>
</div>Related Components
Tag Cloud Component
A Tag Cloud Component designed with Neumorphism style in grayscale, suitable for blogs and content consumption, featuring interactive elements.
Tag Cloud Component
A responsive tag cloud component with engaging animations, using a monochromatic color scheme suitable for a portfolio.
Tag Cloud Component
A Tag Cloud Component with Glassmorphism design, featuring responsive effects and dark theme support.