Edit in JSFiddle

const $dropdowns = Array.prototype.slice.call(document.querySelectorAll('[dropdown="true"]'), 0)
if ($dropdowns.length > 0) {
    $dropdowns.forEach($el => {
        $el.addEventListener("click", event => {
        	document.getElementById($el.dataset.target).classList.toggle("invisible")
        })
    })
}
<div class="relative">
    <button
      class="border border-blue bg-white p-3 rounded text-blue shadow-inner"
      dropdown="true"
      data-target="dropdown-menu"
    >
      <span>BUTTON</span>
      <svg class="ml-2 h-4" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
        <g>
          <path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
        </g>
      </svg>
    </button>
    <div
      id="dropdown-menu"
      class="invisible absolute w-48 pin-t pin-l mt-12 bg-white shadow rounded border overflow-hidden"
    >
        <a
            href="#"
            class="no-underline block px-4 py-3 border-b text-grey-darkest bg-white hover:text-white hover:bg-grey whitespace-no-wrap"
        >
          Profile
        </a>
        <a
            href="#"
            class="no-underline block px-4 py-3 border-b text-grey-darkest bg-white hover:text-white hover:bg-grey whitespace-no-wrap"
        >
          Logout
        </a>
    </div>
</div>