JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css">
<script src="https://unpkg.com/[email protected]"></script>
<div id="root" class="container">
  <modal v-if="showModal" @close="showModal=false">
    <p>We insert any text here.</p>
  </modal>
  <button @click="showModal=true">Show Modal</button>
</div>

CSS

body {
  padding-top: 40px;
}

JavaScript

Vue.component('modal', {
  template: `
  <div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
  <div class="box">
   <slot></slot>
    </div>
  </div>
  <button class="modal-close" @click="$emit('close')"></button>
</div>
  `,
});

new Vue({
  el: '#root',
  data:{
   showModal:false
  }
})