Tailwind CSS Dropdown - Notus JS

An interactive menu that opens to the bottom of a button using Javascript and Tailwind CSS.

For this component to properly work, you will need to install popper.js into your project. Please run the following: npm i -E @popperjs/[email protected]

Or, if you are not used to workin with terminal and HTML, please add the following script: <script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>

Check out our dropdown example that appears when the user clicks the button. It is available in different colors.

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-900 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-white')">
        white Dropdown
      </button>
      <div class="hidden bg-white  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-white">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-blueGray-500 active:bg-blueGray-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-blueGray')">
        blueGray Dropdown
      </button>
      <div class="hidden bg-blueGray-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-blueGray">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-red')">
        red Dropdown
      </button>
      <div class="hidden bg-red-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-red">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-orange-500 active:bg-orange-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-orange')">
        orange Dropdown
      </button>
      <div class="hidden bg-orange-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-orange">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-amber-500 active:bg-amber-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-amber')">
        amber Dropdown
      </button>
      <div class="hidden bg-amber-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-amber">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-emerald-500 active:bg-emerald-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-emerald')">
        emerald Dropdown
      </button>
      <div class="hidden bg-emerald-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-emerald">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-teal-500 active:bg-teal-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-teal')">
        teal Dropdown
      </button>
      <div class="hidden bg-teal-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-teal">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-lightBlue-500 active:bg-lightBlue-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-lightBlue')">
        lightBlue Dropdown
      </button>
      <div class="hidden bg-lightBlue-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-lightBlue">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-indigo-500 active:bg-indigo-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-indigo')">
        indigo Dropdown
      </button>
      <div class="hidden bg-indigo-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-indigo">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-purple-500 active:bg-purple-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-purple')">
        purple Dropdown
      </button>
      <div class="hidden bg-purple-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-purple">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-pink-500 active:bg-pink-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-pink')">
        pink Dropdown
      </button>
      <div class="hidden bg-pink-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-pink">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

Dropup Example

Check out our dropup example that appears when the user clicks the button. It is available in different colors.

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-900 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-white')">
        white Dropup
      </button>
      <div class="hidden bg-white  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-white">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-blueGray-500 active:bg-blueGray-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-blueGray')">
        blueGray Dropup
      </button>
      <div class="hidden bg-blueGray-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-blueGray">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-red')">
        red Dropup
      </button>
      <div class="hidden bg-red-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-red">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-orange-500 active:bg-orange-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-orange')">
        orange Dropup
      </button>
      <div class="hidden bg-orange-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-orange">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-amber-500 active:bg-amber-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-amber')">
        amber Dropup
      </button>
      <div class="hidden bg-amber-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-amber">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-emerald-500 active:bg-emerald-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-emerald')">
        emerald Dropup
      </button>
      <div class="hidden bg-emerald-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-emerald">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-teal-500 active:bg-teal-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-teal')">
        teal Dropup
      </button>
      <div class="hidden bg-teal-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-teal">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-lightBlue-500 active:bg-lightBlue-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-lightBlue')">
        lightBlue Dropup
      </button>
      <div class="hidden bg-lightBlue-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-lightBlue">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-indigo-500 active:bg-indigo-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-indigo')">
        indigo Dropup
      </button>
      <div class="hidden bg-indigo-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-indigo">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-purple-500 active:bg-purple-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-purple')">
        purple Dropup
      </button>
      <div class="hidden bg-purple-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-purple">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-pink-500 active:bg-pink-600 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id-pink')">
        pink Dropup
      </button>
      <div class="hidden bg-pink-500  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48" id="dropdown-id-pink">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-white">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'top'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>

Props

Please check the official PopperJS Documentation.

You can also check the Official PopperJS Github Repository.

Tailwind CSS Dropdown - Notus JS

Dropdown Example

Dropup Example

Props