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 (modo oscuro, pastel)
Un componente de nube de etiquetas responsivo con soporte para modo oscuro, usando colores pastel. Adecuado para una cartera.
Componente de nube de etiquetas
Un componente de Tag Cloud complejo y receptivo con microinteracciones, diseñado para un panel de control, utilizando un esquema de color en escala de grises. Soporta el modo oscuro.
Componente de nube de etiquetas
Un componente de nube de etiquetas monoespaciado inspirado en código para sitios web de juegos con colores de alto contraste y compatibilidad con modo oscuro. Presenta una estética similar a la de un terminal con etiquetas interactivas.