Menu Horizontal

                    <ul class="flex space-x-2 mx-auto my-8 p-2 rounded-lg bg-gray-100 shadow-md max-w-2xl">
  <li>
    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
      Item 1
    </a>
  </li>
  <li>
    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
      Item 2
    </a>
  </li>
  <li>
    <a href="#" class="block px-4 py-2 bg-blue-500 text-white rounded-md transition-colors">
      Active Item
    </a>
  </li>
  <li>
    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
      Item 4
    </a>
  </li>
  <li>
    <a href="#" class="block px-4 py-2 text-gray-400 cursor-not-allowed rounded-md transition-colors">
      Disabled Item
    </a>
  </li>
</ul>