Navegación lúdica en el panel de control

<nav class="bg-emerald-400 dark:bg-emerald-800 p-4 rounded-b-3xl shadow-lg">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <a href="#" class="text-white text-2xl font-bold tracking-tight mb-4 md:mb-0 dark:text-emerald-100">Dashboard Fun</a>
    <button class="md:hidden text-white dark:text-emerald-100 focus:outline-none" aria-label="Toggle navigation">
      <svg class="w-8 h-8" 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 12h16m-4 6h4"></path>
      </svg>
    </button>
    <ul class="hidden md:flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-lg">
      <li>
        <a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
          <span class="block md:inline">Overview</span>
        </a>
      </li>
      <li>
        <a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
          <span class="block md:inline">Analytics</span>
        </a>
      </li>
      <li>
        <a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
          <span class="block md:inline">Reports</span>
        </a>
      </li>
      <li>
        <a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
          <span class="block md:inline">Settings</span>
        </a>
      </li>
    </ul>
    <!-- Mobile menu (hidden by default) - A JavaScript toggle would be needed for this -->
    <ul class="md:hidden flex-col items-center mt-4 space-y-3 w-full text-lg" id="mobile-menu-items">
      <li>
        <a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
          Overview
        </a>
      </li>
      <li>
        <a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
          Analytics
        </a>
      </li>
      <li>
        <a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
          Reports
        </a>
      </li>
      <li>
        <a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
          Settings
        </a>
      </li>
    </ul>
  </div>
</nav>