JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <slot name="header">
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
              default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                            default bodydefault bodydefault bodydefault bodydefault bodydefault body
                           ...

CSS

.modal-body {
  overflow: auto;
  max-height: calc(70vh - 70px) !important
}
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  max-height: 70vh !important;
  width: 300px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

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

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

JavaScript

// register modal component
Vue.component('modal', {
  template: '#modal-template'
})

// start app
new Vue({
  el: '#app',
  data: {
    showModal: false
  }
})