Composants Nuage de balises Glassmorphism Tag Cloud Component
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.
Aperçu

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 de nuage de balises simple, réactif et dynamique conçu selon les principes du Bauhaus pour les sites Web d’entreprise et d’entreprise, avec des formes géométriques et des couleurs primaires à haute saturation avec prise en charge du mode sombre.
Ouvrir
Composant de nuage de balises

Un composant de nuage de balises avec un design Glassmorphism, avec des effets réactifs et la prise en charge du thème sombre.
Ouvrir
Composant de nuage de balises rétro

Un composant de nuage de balises réactif utilisant Tailwind CSS, avec une esthétique de design rétro/vintage, une palette de couleurs pastel et une complexité simple. Convient à un portefeuille, y compris la prise en charge du mode sombre.
Ouvrir