Tailwind CSS Menu Components

                            <ul class="w-64 mx-auto my-8 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">
      Home
    </a>
  </li>
  
  <li class="mb-1">
    <details class="group">
      <summary class="flex items-center justify-between px-4 py-2 text-gray-700 cursor-pointer hover:bg-blue-500 hover:text-white rounded-md transition-colors">
        <span>Products</span>
        <svg class="w-5 h-5 transition-transform group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </summary>
      <ul class="pl-4 mt-1 space-y-1">
        <li>
          <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
            Templates
          </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">
            UI Kits
          </a>
        </li>
        <li>
          <details class="group/nested">
            <summary class="flex items-center justify-between px-4 py-2 text-gray-700 cursor-pointer hover:bg-blue-500 hover:text-white rounded-md transition-colors">
              <span>Resources</span>
              <svg class="w-4 h-4 transition-transform group-open/nested:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </summary>
            <ul class="pl-4 mt-1 space-y-1">
              <li>
                <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
                  E-books
                </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">
                  Tutorials
                </a>
              </li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
  
  <li class="mb-1">
    <details class="group">
      <summary class="flex items-center justify-between px-4 py-2 text-gray-700 cursor-pointer hover:bg-blue-500 hover:text-white rounded-md transition-colors">
        <span>Services</span>
        <svg class="w-5 h-5 transition-transform group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </summary>
      <ul class="pl-4 mt-1 space-y-1">
        <li>
          <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
            Consulting
          </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">
            Development
          </a>
        </li>
      </ul>
    </details>
  </li>
  
  <li>
    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
      Contact Us
    </a>
  </li>
</ul> 
                        

                            <ul class="w-56 mx-auto my-8 p-2 rounded-lg bg-gray-100 shadow-md">
  <li class="mb-1">
    <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
      <svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        <polyline points="9 22 9 12 15 12 15 22"></polyline>
      </svg>
      Home
    </a>
  </li>
  <li class="mb-1">
    <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
      <svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
        <circle cx="12" cy="7" r="4"></circle>
      </svg>
      Profile
    </a>
  </li>
  <li class="mb-1">
    <a href="#" class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-md transition-colors">
      <svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
        <line x1="3" y1="9" x2="21" y2="9"></line>
        <line x1="9" y1="21" x2="9" y2="9"></line>
      </svg>
      Dashboard
    </a>
  </li>
  <li class="mb-1">
    <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors">
      <svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
      </svg>
      Contact
    </a>
  </li>
  <li class="mb-1">
    <a href="#" class="flex items-center px-4 py-2 text-gray-400 cursor-not-allowed rounded-md transition-colors">
      <svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
      </svg>
      Settings
    </a>
  </li>
</ul> 
                        

                            <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> 
                        

                            <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> 
                        

                            <ul class="flex flex-col gap-2 w-16 mx-auto my-8 p-2 rounded-lg bg-gray-100 shadow-md">
  <li class="mb-1">
    <a href="#" class="flex justify-center items-center h-12 w-12 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors" title="Home">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        <polyline points="9 22 9 12 15 12 15 22"></polyline>
      </svg>
    </a>
  </li>
  <li class="mb-1">
    <a href="#" class="flex justify-center items-center h-12 w-12 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors" title="Profile">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
        <circle cx="12" cy="7" r="4"></circle>
      </svg>
    </a>
  </li>
  <li class="mb-1">
    <a href="#" class="flex justify-center items-center h-12 w-12 bg-blue-500 text-white rounded-md transition-colors" title="Dashboard">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
        <line x1="3" y1="9" x2="21" y2="9"></line>
        <line x1="9" y1="21" x2="9" y2="9"></line>
      </svg>
    </a>
  </li>
  <li class="mb-1">
    <a href="#" class="flex justify-center items-center h-12 w-12 text-gray-700 hover:bg-blue-500 hover:text-white rounded-md transition-colors" title="Contact">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
      </svg>
    </a>
  </li>
  <li>
    <a href="#" class="flex justify-center items-center h-12 w-12 text-gray-400 cursor-not-allowed rounded-md transition-colors" title="Settings">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="3"></circle>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
      </svg>
    </a>
  </li>
</ul>
                        

                            <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> 
                        

                            <ul class="w-56 mx-auto my-8 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 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 3
    </a>
  </li>
  <li class="mb-1">
    <a href="#" class="block px-4 py-2 bg-blue-500 text-white rounded-md transition-colors">
      Active Item
    </a>
  </li>
  <li class="mb-1">
    <a href="#" class="block px-4 py-2 text-gray-400 cursor-not-allowed rounded-md transition-colors">
      Disabled Item
    </a>
  </li>
</ul>