Menu Responsive

                    <ul class="flex flex-col sm:flex-row sm:space-x-2 space-y-1 sm:space-y-0 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 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 3
    </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>

<div class="max-w-2xl mx-auto my-8 p-4 bg-white rounded-lg shadow-md">
  <h2 class="text-lg font-medium mb-4 text-center">Responsive Menu Example</h2>
  <p class="text-gray-600 mb-4 text-center">
    This menu changes from vertical layout on mobile to horizontal layout on larger screens.
    <br>
    Resize your browser window to see the responsive behavior.
  </p>
</div>