JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal-open">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar sem enim, eget fringilla nibh aliquam eget. Nulla sed diam dictum, sodales orci quis, tempus sapien. Proin suscipit posuere pretium. Mauris scelerisque nulla non sapien sollicitudin
    aliquet. Pellentesque ac purus sit amet justo dictum consectetur. Maecenas luctus dignissim ultricies. Nunc finibus laoreet pretium. Pellentesque augue mi, tincidunt a varius nec, mollis a turpis. Aenean lectus magna, commodo non rhoncus quis, dignissim
    vitae neque. Donec sollicitudin risus eget ligula convallis mattis. Proin cursus fringilla sodales. Vivamus hendrerit nisl nec rhoncus maximus.
    <br>
    <br>Duis nec fermentum sem, non mollis nisi. Maecenas nec varius purus. Donec hendrerit erat in eros euismod rutrum. Nullam justo nisl, mollis et dolor vel, placerat maximus sapien. Cras volutpat molestie tellus vel semper. Nullam eleifend arcu arcu,
    eleifend dignissim tellus facilisis ac. Integer tellus nibh, ultricies eu orci at, ultrices luctus urna. Ut consequat neque vel tellus venenatis imperdiet. Phasellus nec tellus libero. Curabitur ornare odio velit, cursus imperdiet quam mollis sollicitudin.
    Aliquam convallis interdum ullamcorper. Praesent euismod lectus vitae urna luctus porttitor. Integer pharetra sodales eros.
    <br>
    <br>Nam pharetra blandit ante. Ut sed sem ante. Proin a porta quam, ut laoreet enim. Donec ullamcorper, arcu ut iaculis malesuada, urna sapien bibendum sapien, in ullamcorper dui odio vel orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    Maecenas lorem eros, interdum non elit sit amet, pharetra laoreet enim. Proin ipsum elit, interdum ut elementum non, cursus in ipsum. Donec ac elit mollis, cursus diam nec, molestie urna. Sed vitae vulputate enim.
    <br>
    <br>Nulla facilisi. Ut at euismod orci, quis posuere enim. Quisque interdum feugiat commodo. Fusce interdum massa non lorem tempor tristique. Donec...

CSS

/* MODAL STYLES */

.modal {
  background: white;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: scale(0) translate(-50%, -50%);
  transform: scale(0) translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  box-shadow: 5px 5px 20px black;
  border-radius: 5px;
  overflow: hidden;
}
.modal .modal-inner {
  margin: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.modal .modal-inner .modal-title,
.modal .modal-inner .modal-body {
  margin: 0 0 20px 0;
}
.modal .modal-inner .modal-body video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.modal .modal-inner .modal-title {
  border-bottom: 1px solid grey;
}
.modal .modal-inner .modal-footer {
  border-top: 1px solid grey;
  padding: 20px 0 0 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.modal .modal-inner .modal-footer .modal-close-button {
  background: #190e8c;
  padding: 10px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
}
.modal .modal-inner .modal-footer .modal-close-button:hover {
  box-shadow: inset 2px 2px 2px black;
  background: navy;
}
.modal.is-open {

  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.modal-open {
  -webkit-filter: blur(5px) grayscale(50%);
  filter: blur(5px) grayscale(50%);
  z-index: 0;
  pointer-events: none;
}