Menu Sizes

                    <div class="max-w-4xl mx-auto my-8 p-6 space-y-12">
  <!-- Extra Small Menu -->
  <div>
    <h2 class="text-lg font-semibold mb-2">Extra Small Menu</h2>
    <ul class="w-48 p-1 rounded-lg bg-gray-100 shadow-md">
      <li class="mb-0.5">
        <a href="#" class="block px-2 py-1 text-xs text-gray-700 hover:bg-blue-500 hover:text-white rounded transition-colors">
          Item 1
        </a>
      </li>
      <li class="mb-0.5">
        <a href="#" class="block px-2 py-1 text-xs text-gray-700 hover:bg-blue-500 hover:text-white rounded transition-colors">
          Item 2
        </a>
      </li>
      <li>
        <a href="#" class="block px-2 py-1 text-xs bg-blue-500 text-white rounded transition-colors">
          Active Item
        </a>
      </li>
    </ul>
  </div>
  
  <!-- Small Menu -->
  <div>
    <h2 class="text-lg font-semibold mb-2">Small Menu</h2>
    <ul class="w-48 p-1.5 rounded-lg bg-gray-100 shadow-md">
      <li class="mb-0.5">
        <a href="#" class="block px-3 py-1.5 text-sm text-gray-700 hover:bg-blue-500 hover:text-white rounded transition-colors">
          Item 1
        </a>
      </li>
      <li class="mb-0.5">
        <a href="#" class="block px-3 py-1.5 text-sm text-gray-700 hover:bg-blue-500 hover:text-white rounded transition-colors">
          Item 2
        </a>
      </li>
      <li>
        <a href="#" class="block px-3 py-1.5 text-sm bg-blue-500 text-white rounded transition-colors">
          Active Item
        </a>
      </li>
    </ul>
  </div>
  
  <!-- Medium Menu (Default) -->
  <div>
    <h2 class="text-lg font-semibold mb-2">Medium Menu (Default)</h2>
    <ul class="w-56 p-2 rounded-lg bg-gray-100 shadow-md">
      <li class="mb-1">
        <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 class="mb-1">
        <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>
    </ul>
  </div>
  
  <!-- Large Menu -->
  <div>
    <h2 class="text-lg font-semibold mb-2">Large Menu</h2>
    <ul class="w-64 p-2.5 rounded-lg bg-gray-100 shadow-md">
      <li class="mb-1.5">
        <a href="#" class="block px-5 py-2.5 text-lg text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
          Item 1
        </a>
      </li>
      <li class="mb-1.5">
        <a href="#" class="block px-5 py-2.5 text-lg text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
          Item 2
        </a>
      </li>
      <li>
        <a href="#" class="block px-5 py-2.5 text-lg bg-blue-500 text-white rounded-md transition-colors">
          Active Item
        </a>
      </li>
    </ul>
  </div>
  
  <!-- Extra Large Menu -->
  <div>
    <h2 class="text-lg font-semibold mb-2">Extra Large Menu</h2>
    <ul class="w-72 p-3 rounded-lg bg-gray-100 shadow-md">
      <li class="mb-2">
        <a href="#" class="block px-6 py-3 text-xl text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
          Item 1
        </a>
      </li>
      <li class="mb-2">
        <a href="#" class="block px-6 py-3 text-xl text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
          Item 2
        </a>
      </li>
      <li>
        <a href="#" class="block px-6 py-3 text-xl bg-blue-500 text-white rounded-md transition-colors">
          Active Item
        </a>
      </li>
    </ul>
  </div>
</div>