How to Make Static Dropdowns in Tailwind

by tailkits

HTML

<script src="https://cdn.tailwindcss.com"></script>
<section class="p-40 justify-center items-center mx-auto">
  <div class="relative inline-block items-center justify-center text-left">
    <button
      class="inline-flex w-full justify-center bg-gray-300 px-4 py-2 text-sm font-medium text-gray-700"
    >
      Options
      <!-- Chevron icon -->
      <svg
        class="ml-2 h-5 w-5"
        xmlns="<http://www.w3.org/2000/svg>"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div
      class="absolute right-0 mt-2 w-56 origin-top-right border border-gray-200 bg-white"
    >
      <div class="py-1">
        <a
          href="#"
          class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
        >
          Account settings
        </a>
        <a
          href="#"
          class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
        >
          Support
        </a>
        <a
          href="#"
          class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
        >
          Sign out
        </a>
      </div>
    </div>
  </div>
</section>