Navegación de Tarjetas de Noticias de Agricultura

<nav class="bg-amber-100 dark:bg-gray-800 p-4 shadow-md font-serif border-b-4 border-amber-300 dark:border-gray-700">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-xl font-bold text-amber-900 dark:text-amber-100 flex items-center mb-4 md:mb-0">
      <svg class="w-8 h-8 mr-2 text-lime-700 dark:text-lime-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm4-1a1 1 0 00-1 1v4a1 1 0 102 0V9a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
      AgriConnect
    </a>

    <div class="md:hidden flex items-center">
      <button id="menu-button" class="text-amber-900 dark:text-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded-md p-2">
        <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div id="menu" class="hidden md:flex md:flex-grow md:items-center md:w-auto w-full mt-4 md:mt-0">
      <ul class="flex flex-col md:flex-row md:ml-auto md:space-x-8 space-y-2 md:space-y-0 w-full md:w-auto">
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Home</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">News</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Resources</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Contact</a></li>
      </ul>
    </div>

    <div class="w-full md:w-auto mt-4 md:mt-0 md:ml-8">
      <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-sm border border-amber-200 dark:border-gray-600 flex flex-col md:flex-row items-center space-y-3 md:space-y-0 md:space-x-3 max-w-sm mx-auto md:mx-0">
        <img class="w-16 h-16 rounded-full object-cover border-2 border-amber-300 dark:border-gray-500" src="https://picsum.photos/seed/farmnews/60/60" alt="News thumbnail">
        <div class="flex-grow text-center md:text-left">
          <p class="text-sm font-semibold text-amber-900 dark:text-amber-100 mb-1 leading-tight">Latest: Sustainable Farming Practices</p>
          <a href="#" class="text-xs text-lime-700 dark:text-lime-300 hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuButton = document.getElementById('menu-button');
      const menu = document.getElementById('menu');

      menuButton.addEventListener('click', function() {
        menu.classList.toggle('hidden');
      });
    });
  </script>
</nav>