Componente de nube de etiquetas

<div class="font-sans bg-amber-50 dark:bg-zinc-900 transition-colors duration-300 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-gradient-to-br from-orange-800 to-red-900 dark:from-zinc-800 dark:to-stone-900 rounded-lg shadow-xl overflow-hidden animate-fade-in border-4 border-orange-900 dark:border-zinc-700 relative">
    
    <!-- Background Texture Overlay -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/crissxcross.png')] opacity-10 dark:opacity-5"></div>
    
    <div class="relative p-4 sm:p-6 md:p-8 space-y-6">
      <!-- Header Section -->
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b-2 border-orange-700 dark:border-zinc-600 pb-4">
        <h2 class="text-3xl sm:text-4xl font-bold text-amber-50 dark:text-amber-100 mb-2 sm:mb-0">
          <i class="fas fa-tags mr-3 text-orange-300 dark:text-zinc-400"></i>Agricultural Insights
        </h2>
        <div class="flex items-center space-x-3">
          <span class="text-orange-200 dark:text-zinc-400 text-sm italic hidden sm:block">Last Updated: <span class="font-semibold">Oct 26, 2023</span></span>
          <button class="p-2 rounded-full bg-orange-700 hover:bg-orange-600 text-amber-50 dark:bg-zinc-700 dark:hover:bg-zinc-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-500">
            <i class="fas fa-sync-alt"></i>
          </button>
        </div>
      </div>

      <!-- Search and Filter Bar -->
      <div class="flex flex-col md:flex-row gap-4">
        <div class="relative flex-grow">
          <input type="text" placeholder="Search for a topic..." class="w-full pl-10 pr-4 py-2 rounded-md bg-orange-900 dark:bg-zinc-700 text-amber-100 placeholder-orange-300 dark:text-amber-100 dark:placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 border-2 border-orange-800 dark:border-zinc-600 shadow-inner-dark">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <i class="fas fa-search text-orange-300 dark:text-zinc-400"></i>
          </div>
        </div>
        <select class="w-full md:w-auto px-4 py-2 rounded-md bg-orange-900 dark:bg-zinc-700 text-amber-100 border-2 border-orange-800 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-inner-dark">
          <option value="all">All Categories</option>
          <option value="crops">Crops</option>
          <option value="livestock">Livestock</option>
          <option value="machinery">Machinery</option>
          <option value="soil">Soil Health</option>
          <option value="sustainability">Sustainability</option>
        </select>
      </div>

      <!-- Tags Container -->
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4 lg:gap-5 auto-rows-min mt-4 p-4 bg-orange-900/50 dark:bg-zinc-800/50 rounded-lg border-2 border-orange-800 dark:border-zinc-700 overflow-hidden shadow-inset-dark">
        <!-- Tag Item -->
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-seedling text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Crop Rotation</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">32 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-cow text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Livestock Care</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">28 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-tractor text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Farm Machinery</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">45 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-leaf text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Organic Farming</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">18 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-droplet text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Irrigation Systems</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">12 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-tree text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Agroforestry</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">9 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-bug text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Pest Management</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">21 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-dollar-sign text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Agricultural Economics</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">15 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-cloud-sun text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Climate Adaptations</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">10 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-tractor text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Precision Farming</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">25 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-truck-pickup text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Supply Chain</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">14 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-flask text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Soil Analysis</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">19 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-solar-panel text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Renewable Energy</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">7 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-graduation-cap text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Extension Services</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">11 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-chart-line text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Market Trends</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">16 topics</span>
        </a>
      </div>

      <!-- Footer Call to Action -->
      <div class="flex flex-col sm:flex-row justify-between items-center bg-orange-900/70 dark:bg-zinc-800/70 p-4 rounded-lg border-2 border-orange-800 dark:border-zinc-700 shadow-lg mt-6">
        <p class="text-amber-100 dark:text-amber-200 text-center sm:text-left mb-3 sm:mb-0">
          Can't find what you're looking for? <span class="font-semibold">Suggest a new topic!</span>
        </p>
        <button class="px-6 py-2 bg-orange-500 hover:bg-orange-400 text-orange-900 font-bold rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-50 dark:focus:ring-orange-300 dark:bg-amber-500 dark:hover:bg-amber-400">
          Add New Tag <i class="fa-solid fa-plus-circle ml-2"></i>
        </button>
      </div>

    </div>
  </div>
  
  <!-- Include Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>

<!-- Custom Styles for shadows using pseudo-elements or multiple box-shadows -->
<style>
  .shadow-inner-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 2px rgba(255, 255, 255, 0.05);
  }
  .dark .shadow-inner-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 2px rgba(255, 255, 255, 0.02);
  }
  .shadow-inset-dark {
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -4px 4px rgba(255, 255, 255, 0.03);
  }
  .dark .shadow-inset-dark {
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -4px 4px rgba(255, 255, 255, 0.01);
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>