JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
<template id="Confirm">
  <transition name="modal">
    <div class="Confirm">
      <div class="Confirm__overlay" @click="$emit('close')"></div>
      <div class="Confirm__body">
        <div class="Confirm__heading">
          <slot />
        </div>
        <div class="Confirm__footer">
          <button class="Confirm__button" @click="$emit('close')">Cancel</button>
          <button class="Confirm__button" @click="$emit('confirmed')">Confirm</button>
        </div>
      </div>
    </div>
  </transition>
</template>
  
<div id="app">
  <Confirm v-if="showConfirm" @close="showConfirm = false" @confirmed="action">Are you sure?</Confirm>
  <button @click="showConfirm = true">open</button>
</div>

SCSS

.Confirm {
  display: block;
  transition: .25s;
  
  &__overlay { 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
  }
    
  &__body {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20rem;
    background-color: #fff;
    z-index: 9999;
    border-radius: 3px;
    transition: .5s transform ease-out;
  }
  
  &__heading {
    padding: 2rem 3rem;
    text-align: center;
    color: #333;
  }
  
  &__footer {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  
  &__button {
    flex: 1;
    padding: 0;
    height: 2.5rem;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    background-color: #4183D7;
    color: #fff;
    
    &:first-child {
      border-right: 1px solid lighten(#4193D7, 10%);
    }
  }
}

.modal-enter, .modal-leave-active {
  opacity: 0;
}

.modal-enter .Confirm__body,
.modal-leave-active .Confirm__body {
  transform: translate(-50%, -150%);
}

JavaScript

Vue.component('Confirm', {
  template: '#Confirm',
})

new Vue({
	el: '#app',
  data: {
  	showConfirm: false
  },
  methods: {
  	action() {
    	this.showConfirm = false;
    	alert('done')
    }
  }
})