<div 
  x-data="{ open: false }" class="relative"
>
  <button 
    @click="open = !open" 
    @click.away="open = false" 
    x-text="open ? 'close' : 'open'" class="rounded w-24 py-2 bg-blue-500 hover:bg-blue-400 text-white font-bold focus:outline-none"
  >open</button>
  <div class="absolute bottom-0 mt-3 bg-white w-64 h-24 flex text-xl items-center justify-center rounded-lg shadow-lg" 
    x-show.transition="open" style="display: none;"
  >
    Hey there!
  </div>

  <p>
    Thanks to
    <a class="text-blue-500 hover:text-blue-800 hover:underline" href="https://twitter.com/kevinbatdorf">
      @kevinbatdorf</a>, original codepen is at:
    <a class="text-blue-500 hover:text-blue-800 hover:underline" href="https://codepen.io/KevinBatdorf/pen/wvMNebe"
    >https://codepen.io/KevinBatdorf/pen/wvMNebe</a>
  </p>
</div>