Composant de nuage d’étiquettes aquarelle/artistique

<div class="font-sans p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-stone-950 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-stone-800 rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300 ease-in-out
    border border-solid border-purple-100 dark:border-stone-700
    bg-[url('https://www.transparenttextures.com/patterns/watercolor.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-mosaic.png')] bg-blend-multiply dark:bg-blend-overlay
    relative px-6 py-8 sm:px-10 sm:py-12 md:px-14 md:py-16
  ">
    <div class="absolute inset-0 bg-gradient-to-br from-pink-50/70 via-purple-50/70 to-blue-50/70 dark:from-stone-900/70 dark:via-gray-900/70 dark:to-slate-900/70 rounded-3xl -z-10"></div>
    
    <h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-pink-600 dark:text-pink-300 mb-6 sm:mb-8 md:mb-10 text-center relative
      before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:-translate-x-1/2 before:w-16 before:h-2 before:bg-purple-300 before:dark:bg-purple-700 before:rounded-full before:-mb-2 before:opacity-70
    ">
      <span class="relative z-10">Community Hot Topics</span>
    </h2>

    <p class="text-lg sm:text-xl text-purple-700 dark:text-purple-200 mb-8 sm:mb-10 md:mb-12 text-center max-w-2xl mx-auto opacity-90 leading-relaxed">
      Explore the most discussed and trending topics in our vibrant community. Click on a tag to dive deeper!
    </p>

    <div class="flex flex-wrap items-center justify-center gap-3 sm:gap-4 md:gap-5 mb-8 sm:mb-10 md:mb-12">
      <!-- Input and Search -->
      <div class="relative w-full max-w-md">
        <input type="text" placeholder="Search tags..." class="w-full pl-12 pr-4 py-3 rounded-full border-2 border-purple-200 dark:border-stone-600 bg-purple-50 dark:bg-stone-700 text-purple-800 dark:text-white placeholder-purple-400 dark:placeholder-stone-400
          focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600 transition-all duration-200 shadow-inner dark:shadow-none
        ">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-6 h-6 text-purple-400 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      
      <!-- Filter/Sort Buttons (example) -->
      <div class="flex flex-wrap justify-center gap-2">
        <button class="px-5 py-2 rounded-full text-sm font-semibold border-2 border-pink-300 dark:border-pink-700 bg-pink-100 dark:bg-pink-900 text-pink-700 dark:text-pink-300
          hover:bg-pink-200 hover:text-pink-800 dark:hover:bg-pink-800 dark:hover:text-pink-200 transition-all duration-200 shadow-md
        ">Trending</button>
        <button class="px-5 py-2 rounded-full text-sm font-semibold border-2 border-blue-300 dark:border-blue-700 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300
          hover:bg-blue-200 hover:text-blue-800 dark:hover:bg-blue-800 dark:hover:text-blue-200 transition-all duration-200 shadow-md
        ">Newest</button>
      </div>
    </div>

    <div class="flex flex-wrap justify-center gap-3 sm:gap-4 md:gap-5 ">
      <!-- Tags -->
      
      <!-- Tag 1 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-pink-200 to-purple-200 dark:from-pink-800 dark:to-purple-800 rounded-full px-5 py-2 sm:px-6 sm:py-2.5 shadow-lg border border-pink-300 dark:border-pink-600
        text-pink-900 light:text-purple-800 dark:text-white dark:hover:text-purple-100 font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Community
        <span class="ml-2 text-sm sm:text-base opacity-80 text-purple-800 dark:text-purple-300">(2.5K)</span>
      </a>

      <!-- Tag 2 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-blue-200 to-green-200 dark:from-blue-800 dark:to-green-800 rounded-full px-5 py-2 sm:px-6 sm:py-2.5 shadow-lg border border-blue-300 dark:border-blue-600
        text-blue-900 dark:text-white dark:hover:text-blue-100 font-semibold text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Discussions
        <span class="ml-2 text-sm sm:text-base opacity-80 text-green-800 dark:text-green-300">(1.8K)</span>
      </a>

      <!-- Tag 3 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-800 dark:to-pink-800 rounded-full px-5 py-2 sm:px-6 sm:py-2.5 shadow-lg border border-purple-300 dark:border-purple-600
        text-purple-900 dark:text-white dark:hover:text-purple-100 font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Announcements
        <span class="ml-2 text-sm sm:text-base opacity-80 text-pink-800 dark:text-pink-300">(987)</span>
      </a>
      
      <!-- Tag 4 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-yellow-100 to-orange-100 dark:from-yellow-700 dark:to-orange-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-yellow-200 dark:border-yellow-600
        text-orange-800 dark:text-white dark:hover:text-yellow-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Suggestions
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-orange-700 dark:text-orange-300">(721)</span>
      </a>

      <!-- Tag 5 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-700 dark:to-purple-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-indigo-200 dark:border-indigo-600
        text-indigo-800 dark:text-white dark:hover:text-indigo-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #TechSupport
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-purple-700 dark:text-purple-300">(645)</span>
      </a>

      <!-- Tag 6 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-teal-100 to-cyan-100 dark:from-teal-700 dark:to-cyan-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-teal-200 dark:border-teal-600
        text-teal-800 dark:text-white dark:hover:text-teal-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Feedback
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-cyan-800 dark:text-cyan-300">(512)</span>
      </a>

      <!-- Tag 7 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-rose-100 to-fuchsia-100 dark:from-rose-700 dark:to-fuchsia-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-rose-200 dark:border-rose-600
        text-rose-800 dark:text-white dark:hover:text-fuchsia-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Events
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-fuchsia-800 dark:text-rose-300">(341)</span>
      </a>

      <!-- Tag 8 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-lime-100 to-emerald-100 dark:from-lime-700 dark:to-emerald-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-lime-200 dark:border-lime-600
        text-emerald-800 dark:text-white dark:hover:text-lime-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Tutorials
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-lime-800 dark:text-emerald-300">(289)</span>
      </a>

      <!-- Tag 9 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-sky-100 to-blue-100 dark:from-sky-700 dark:to-blue-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-sky-200 dark:border-sky-600
        text-sky-800 dark:text-white dark:hover:text-blue-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Guides
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-blue-800 dark:text-sky-300">(210)</span>
      </a>

      <!-- Tag 10 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-violet-100 to-indigo-100 dark:from-violet-700 dark:to-indigo-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-violet-200 dark:border-violet-600
        text-indigo-800 dark:text-white dark:hover:text-violet-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Challenges
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-violet-800 dark:text-indigo-300">(155)</span>
      </a>

    </div>

    <div class="mt-10 sm:mt-12 md:mt-16 text-center">
      <p class="text-sm text-purple-600 dark:text-purple-300 opacity-90">Don't see your topic? <a href="#" class="font-bold underline highlight-link hover:text-pink-700 dark:hover:text-pink-400 transition-colors duration-200">Start a new discussion!</a></p>
    </div>

  </div>
</div>