Vue

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
<div id="app" class="relative">
  <div class="h-screen w-full p-4">
    <span class="rounded p-2 bg-gray-200 cursor-pointer" @click="modalOpen = true;">
      Open Modal
    </span>
  </div>

  <div v-if="modalOpen" class="absolute bg-black opacity-25 inset-0 z-10" @click="modalOpen = false;"></div>

  <div class="absolute inset-0 flex justify-center items-center" v-if="modalOpen">
    <div class="bg-white p-8 z-20">
      Modal
    </div>
  </div>

</div>

Vue

new Vue({
  el: "#app",
  data: function () {
    	return {
    		modalOpen: false
      }
  }
})