Dropdowns

<div class="w-full">
  <a class="text-blueGray-500 block"
    href="#pablo"
    onclick="openDropdown(event,'settings-dropdown')">
      <div class="relative">
         <button
           class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"

         >
           <i class="fas fa-cog"></i><i class="ml-2 fas fa-caret-down transition-all duration-100 ease-in-out transform "></i>
         </button>
         <div class="block  z-50">
            <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in transform opacity-0 scale-95 absolute "><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Edit Profile</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Settings</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Log out</a></div>
         </div>
      </div>
    </a>

    <div
      class="hidden bg-white text-base z-50 float-left p-2 border list-none text-left rounded shadow-lg min-w-48"
      id="settings-dropdown"
    >
      <a
        href="#pablo"
        class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
        >Action</a
      ><a
        href="#pablo"
        class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
        >Another action</a
      ><a
        href="#pablo"
        class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
        >Something else here</a
      >
      <div
        class="h-0 my-2 border border-solid border-blueGray-100"
      ></div>
      <a
        href="#pablo"
        class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
        >Seprated link</a
      >
    </div>
 </div>

 <script type="text/javascript">
   /* Function for dropdowns */
   function openDropdown(event, dropdownID) {
     let element = event.target;
     while (element.nodeName !== "A") {
       element = element.parentNode;
     }
     Popper.createPopper(element, document.getElementById(dropdownID), {
       placement: "bottom-start",
     });
     document.getElementById(dropdownID).classList.toggle("hidden");
     document.getElementById(dropdownID).classList.toggle("block");
   }
 </script>

<div class="w-full">
    <a
      class="text-blueGray-500 block"
      href="javascript:;"
      onclick="openDropdown(event,'user-dropdown')">
       <div class="items-center flex"><span class="w-12 h-12 text-sm text-white bg-blueGray-300 inline-flex items-center justify-center rounded-full">
          <img alt="..." class="w-full rounded-full align-middle border-none shadow-lg" src="https://demos.creative-tim.com/notus-pro-react/static/media/team-1-800x800.fa5a7ac2.jpg"></span></div>
    </a>
    <div
      class="hidden bg-white text-base z-50 float-left p-2 border list-none text-left rounded shadow-lg min-w-48"
      id="user-dropdown"
    >
      <a
        href="#pablo"
        class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
        >Action</a
      ><a
        href="#pablo"
        class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
        >Another action</a
      ><a
        href="#pablo"
        class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
        >Something else here</a
      >
      <div
        class="h-0 my-2 border border-solid border-blueGray-100"
      ></div>
      <a
        href="#pablo"
        class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
        >Seprated link</a
      >
    </div>
 </div>

<div class="w-full">
   <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-blueGray-800"
   href="javascript:;"
   onclick="openDropdown(event,'demo-dropdown')">
     Demo Pages
     <i class="ml-1 fas fa-caret-down transition-all duration-200 ease-in-out transform "></i>
   </a>
   <div
     class="hidden bg-white text-base z-50 float-left p-2 border list-none text-left rounded shadow-lg min-w-48"
     id="demo-dropdown"
   >
     <a
       href="#pablo"
       class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
       >Action</a
     ><a
       href="#pablo"
       class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
       >Another action</a
     ><a
       href="#pablo"
       class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
       >Something else here</a
     >
     <div
       class="h-0 my-2 border border-solid border-blueGray-100"
     ></div>
     <a
       href="#pablo"
       class="text-sm font-normal px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100"
       >Seprated link</a
     >
   </div>
</div>