JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <div class="app">
    <button @click="isOpen = true">Abrir</button>
  </div>
  <div :class="[isOpen ? 'open' : '']" class="modal">
    <div class="content">
      Meu modal
      <button @click="isOpen = false">Fechar</button>
    </div>
  </div>
</div>

CSS

.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  transform: translate(0, -100%);
  transition: all .3s;
}
.modal.open {
  transform: translate(0, 0);
}
.modal .content {
  background: #fff;
  padding: 20px;
  margin: 20px;
}

JavaScript

new Vue({el: '#app', data: {isOpen: false}});