<div class="dropdown">

  <button onclick="toggleDropdown()">Dropdown</button>

  <div id="dropdownContent" class="dropdown-content">

    <a href="#">Option 1</a>

    <a href="#">Option 2</a>

    <a href="#">Option 3</a>

  </div>

</div>

/* Style the dropdown button */

.dropdown button {

  background-color: #4CAF50;

  color: white;

  padding: 10px;

  font-size: 16px;

  border: none;

}

/* Style the dropdown content (hidden by default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}

/* Style links inside the dropdown */

.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {

  background-color: #f1f1f1;

}

/* Show the dropdown menu when the button is clicked */

.show {

  display: block;

}

/* Style the dropdown button */

.dropdown button {

  background-color: #4CAF50;

  color: white;

  padding: 10px;

  font-size: 16px;

  border: none;

}

/* Style the dropdown content (hidden by default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}

/* Style links inside the dropdown */

.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {

  background-color: #f1f1f1;

}

/* Show the dropdown menu when the button is clicked */

.show {

  display: block;

}

 function toggleDropdown() {

  var dropdownContent = document.getElementById("dropdownContent");

  dropdownContent.classList.toggle("show");

}

// Close the dropdown menu if the user clicks outside of it

window.onclick = function(event) {

  if (!event.target.matches('.dropdown button')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");

    for (var i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns[i];

      if (openDropdown.classList.contains('show')) {

        openDropdown.classList.remove('show');

      }

    }

  }

}

------------------------------------------------------------------------------------------------------------------------

<script src="https://cdn.tailwindcss.com"></script>

<style>

.arrow {

  border: solid white;

  border-width: 0 3px 3px 0;

  display: inline-block;

  padding: 2px;

}

.right {

  transform: rotate(-45deg);

  -webkit-transform: rotate(-45deg);

}

.left {

  transform: rotate(135deg);

  -webkit-transform: rotate(135deg);

}

.up {

  transform: rotate(-135deg);

  -webkit-transform: rotate(-135deg);

}

.down {

  transform: rotate(45deg);

  -webkit-transform: rotate(45deg);

}

</style>

                <div class="relative inline-block text-left">

  <button type="" onclick="toggleDropdown(1)" class="btn btn-primary btn-xl page-scroll inline-flex justify-center w-full rounded-full  border border-gray-300 shadow-sm

      hover:bg-gray-50 hover:text-gray-900 focus:outline-none  ">

    MD STAFF

   <i class="arrow down ml-3 mt-1"></i>

  </button>

  <div id="dropdownContent1" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" 

  style="display: none;">

    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">

    <a href="https://md.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD APL Management</a>

      <a href="https://collect.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD UPC Collect</a>

      <a href="https://upc.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD APL Checker</a>

    </div>

  </div>

</div>

                <div class="relative inline-block text-left">

  <button type="" onclick="toggleDropdown(2)" class="btn btn-primary btn-xl page-scroll inline-flex justify-center w-full rounded-full  border border-gray-300 shadow-sm

      hover:bg-gray-50 hover:text-gray-900 focus:outline-none   ">

    VI STAFF

    <i class="arrow down ml-3 mt-1"></i>

  </button>

  <div id="dropdownContent2" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" 

  style="display: none;">

    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">

      <a href="https://vi.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">VI APL Management</a>

      <a href="https://vicollect.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">VI UPC Collect</a>

      <!-- <a href="https://upc.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">APL Checker</a> -->

    </div>

  </div>

</div>

                <div class="relative inline-block text-left">

  <button type="" onclick="toggleDropdown(3)" class="btn btn-primary btn-xl page-scroll inline-flex justify-center w-full rounded-full  border border-gray-300 shadow-sm

      hover:bg-gray-50 hover:text-gray-900 focus:outline-none  ">

    VENDORS 

    <i class="arrow down ml-3 mt-1"></i>

  </button>

  <div id="dropdownContent3" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" 

  style="display: none;">

    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">

    <a href="https://up.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD UPC Upload</a>

       <a href="https://upc.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD APL Checker</a>

    </div>

  </div>

</div>

                <div class="relative inline-block text-left">

                  <a href="tutorial/index.php">

  <button type=""   class="btn btn-success btn-xl page-scroll inline-flex justify-center w-full rounded-full  border border-gray-300 shadow-sm

      hover:bg-gray-50 hover:text-gray-900 focus:outline-none  ">

    TUTORIALS

  </button>

</a>

</div> 

        <script>

function toggleDropdown(a) {

  var dropdownContent = document.getElementById("dropdownContent"+a);

 // console.log(a);

 // console.log(dropdownContent);

  if (dropdownContent.style.display === "none") {

    dropdownContent.style.display = "block";

  } else {

    dropdownContent.style.display = "none";

  }

}

// Close the dropdown menu if the user clicks outside of it

window.onclick = function(event) {

  if (!event.target.matches('.inline-flex')) {

    var dropdowns = document.getElementsByClassName("origin-top-right");

    for (var i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns[i];

      if (openDropdown.style.display === "block") {

        openDropdown.style.display = "none";

      }

    }

  }

}

</script>