Componente de nube de etiquetas de Glassmorphism
Un componente de nube de etiquetas de estilo glassmorphism con esquema de color púrpura/violeta, adecuado para carteras. Cuenta con elementos translúcidos esmerilados, diseño receptivo y compatibilidad con el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de nube de etiquetas
Un componente de nube de etiquetas 3D con colores vibrantes para paneles de visualización de datos.
Componente de nube de etiquetas
Un componente de Tag Cloud receptivo diseñado para interfaces de redes sociales con una interfaz de usuario de modo oscuro y una combinación de colores pastel.
Componente de nube de etiquetas para agricultura/ganadería
Un componente de nube de etiquetas minimalista y receptivo diseñado para sitios web agrícolas y ganaderos, con colores neutros fríos y soporte para modo oscuro.