JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="modals">
  <div class="modal-type">
    <a href="#modal-id-1" class="btn">モーダルウィンドウ！</a>

  </div>
  <div class="light-modal" id="modal-id-1" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true">
    <div class="light-modal-content animated zoomInUp">
      <a href="#" class="light-modal-close-icon" aria-label="close">&times;</a>
      <div class="light-modal-body">
      <p>foo bar. エフェクトは<a href="https://daneden.github.io/animate.css/">Animate.css</a>を使う</p>
      </div>
    </div>
  </div>

CSS

/*!
   light-modal v1.0.1: A new lightweight css modal.
   (c) 2017 
   MIT License
   git+https://github.com/hunzaboy/Light-Modal.git
*/

.light-modal {
  display: none;
  position: fixed;
  background: transparent;
  top: 0;
  bottom: 0;
  left: 0;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  right: 0;
  z-index: 9000;
  transition: background 1s;
  font-size: 16px;
}

.light-modal-content {
  background: #0099ff;
  color: #fff;
  width: 30vw;
  border-radius: .2em;
  position: relative;
  max-height: calc(100vh - 150px);
  line-height: 1.4;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.light-modal-content img {
  max-width: 100%;
  border-radius: .2em;
}

.light-modal-content.large-content {
  width: 50vw;
}

.light-modal-header {
  padding: 20px 20px 20px 20px;
  background: rgba(0, 0, 0, 0.2);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
}

.light-modal-heading {
  margin: 0;
  font-size: 1.5em;
}

.light-modal-heading + .light-modal-close-icon {
  position: static;
}

.light-modal-body {
  padding: 20px;
  overflow: auto;
  max-height: 500px;
}

.light-modal-footer {
  padding: 20px 20px 20px 20px;
  background: rgba(0, 0, 0, 0.2);
  text-align: right;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.light-modal-close-icon,
.light-modal-close-btn {
  text-decoration: none;
  color: #fff;
  padding: 5px 10px;
  border-radius: .2em;
  background: #FF6F91;
  font-size: 1.5em;
  line-height: 1;
  transition: background .2s ease-in-out;
}

.light-modal-close-icon:hover,
.light-modal-close-btn:hover {
  background: #ff3c6a;
}

.light-modal-close-icon {
  position: absolute;
  top: -15px;
  right: -15px;
}

.light-modal-close-btn {
  font-size: 1em;
}

.light-modal-caption {
  position: absolute;
  left:...