Glassmorphism 标签云组件

<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>