Componente de nube de etiquetas para agricultura/ganadería

<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-4xl mx-auto font-sans text-gray-900 dark:text-gray-100 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center sm:text-left">
    Explore Farming Topics
  </h2>
  <div class="flex flex-wrap gap-2 sm:gap-3 justify-center sm:justify-start">
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🌱</span> Crop Rotation
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🚜</span> Farm Machinery
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🌾</span> Grain Storage
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">💧</span> Water Management
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🐄</span> Livestock Care
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🌎</span> Sustainable Farming
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🐛</span> Pest Control
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">💰</span> Agricultural Economics
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🍎</span> Orchard Management
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">☀️</span> Climate Effects
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🔬</span> Soil Science
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🐝</span> Pollination
    </a>
  </div>
</div>