Glassmorphism Tag Cloud Component
Un composant de nuage d’étiquettes de style glassmorphism avec une palette de couleurs violette/violette, adapté aux portfolios. Comprend des éléments translucides givrés, un design réactif et une prise en charge du mode sombre.
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>Composants associés
Composant de nuage de balises
Un composant Tag Cloud réactif conçu pour les interfaces de médias sociaux avec une interface utilisateur en mode sombre et une palette de couleurs pastel.
Composant de nuage de balises
Composant de nuage de balises complexe et réactif avec des micro-interactions, conçu pour un tableau de bord, à l’aide d’un schéma de couleurs en niveaux de gris. Prend en charge le mode sombre.
Composant Luxury Tag Cloud
Un composant de nuage de balises élégant et réactif conçu pour les services de conseil professionnels, avec une esthétique luxueuse/premium avec des tons de coucher de soleil/de couleurs chaudes et la prise en charge du mode sombre.