Large Dropdown - Tailwind Component

Create a large dropdown menu that appears when the user moves the mouse over an element inside a navigation bar.
navbar
Loading component...
index.html
108 lines
<section class="h-screen bg-indigo-200">
  <nav class="relative bg-blue-800 border-b-8 border-indigo-400 shadow-lg text-gray-600">
    <div class="container mx-auto flex items-center justify-between px-2">
      <div class="relative block text-xl font-bold ">
        <h1 class="cursor-pointer text-gray-200 hover:text-gray-50">Tailwind</h1>
      </div>
      <ul class="flex items-center">
        <li class="toggleable text-gray-200 hover:text-gray-100">
          <input type="checkbox" value="selected" id="toggle-one" class="toggle-input">
          <label for="toggle-one" class="block cursor-pointer py-6 px-4 text-lg font-bold">Services</label>
          <div role="toggle" class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-gray-50">
            <div class="container mx-auto w-full flex flex-wrap justify-end text-right sm:text-left">
              <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 pb-6 pt-6 lg:pt-3">
                <h3 class="font-bold text-xl text-gray-700 mb-4">Development</h3>
                <li>
                  <span
                    class="block px-3 py-2 rounded-lg cursor-pointer text-lg font-medium text-gray-600 hover:bg-gray-800 hover:text-gray-100">Bespoke
                    software</span>
                </li>
                <li>
                  <span
                    class="block px-3 py-2 rounded-lg cursor-pointer text-lg font-medium text-gray-600 hover:bg-gray-800 hover:text-gray-100">Mobile
                    apps</span>
                </li>
                <li>
                  <span
                    class="block px-3 py-2 rounded-lg cursor-pointer text-lg font-medium text-gray-600 hover:bg-gray-800 hover:text-gray-100">Websites</span>
                </li>
              </ul>
              <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 pb-6 pt-6 lg:pt-3">
                <h3 class="font-bold text-xl text-gray-700 mb-4">Professional Services</h3>
                <li>
                  <span
                    class="block px-3 py-2 rounded-lg cursor-pointer text-lg font-medium text-gray-600 hover:bg-gray-800 hover:text-gray-100">Project
                    rescue</span>
                </li>
                <li>
                  <span
                    class="block px-3 py-2 rounded-lg cursor-pointer text-lg font-medium text-gray-600 hover:bg-gray-800 hover:text-gray-100">Source
                    code recovery</span>
                </li>
                <li>
                  <span
                    class="block px-3 py-2 rounded-lg cursor-pointer text-lg font-medium text-gray-600 hover:bg-gray-800 hover:text-gray-100">App
                    support & maintenance</span>
                </li>
              </ul>
              <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 pb-6 pt-6 lg:pt-3">
                <h3 class="font-bold text-xl text-gray-700 mb-4">Fixed Price Services</h3>
                <li>
                  <span
                    class="block px-3 py-2 rounded-lg cursor-pointer text-lg font-medium text-gray-600 hover:bg-gray-800 hover:text-gray-100">Add
                    capthca</span>
                </li>
                <li>
                  <span
                    class="block px-3 py-2 rounded-lg cursor-pointer text-lg font-medium text-gray-600 hover:bg-gray-800 hover:text-gray-100">Add
                    core data</span>
                </li>
                <li>
                  <span
                    class="block px-3 py-2 rounded-lg cursor-pointer text-lg font-medium text-gray-600 hover:bg-gray-800 hover:text-gray-100">image
                    to HTML</span>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</section>
<style>
  .mega-menu {
    display: none;
    left: 0;
    position: absolute;
    width: 100%;
  }

  .toggleable>label:after {
    content: "\25BC";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
  }

  .toggle-input {
    display: none;
  }

  .toggle-input:not(checked)~.mega-menu {
    display: none;
  }

  .toggle-input:checked~.mega-menu {
    display: block;
  }

  .toggle-input:checked~label:after {
    content: "\25B2";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
  }
</style>
Large Dropdown - Tailwind Component

Preview - Large Dropdown - Tailwind Component
