JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<script src="http://placehold.it/140x100"></script>
<script src="http://placehold.it/116x116"></script>
<div id="modalWindow">
  <div class="modal-header" data-closable="slide-out-up">
    <button class="close" aria-label="Dismiss alert" type="button" data-close onclick="document.getElementById('modalWindow').style.display='none';">
      <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
    </button>
  </div> 
  <div>
  This is modal window text....
  </div>
</div>

CSS

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover {
  opacity: 1;
}

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}