JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/JacobLett/bootstrap4-latest/master/bootstrap-4-latest.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.js"></script>
<div class="container text-center p-3">
  <h1>Bootstrap 4 Modal Vertically Center Flexbox</h1>
  
  
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Dead Center Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim saepe animi et asperiores a voluptates deserunt velit facilis alias blanditiis minus vero totam sequi quis corporis earum incidunt, dignissimos est?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim saepe animi et asperiores a voluptates deserunt velit facilis alias blanditiis minus vero totam sequi quis corporis earum incidunt, dignissimos est?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim saepe animi et asperiores a voluptates deserunt velit facilis alias blanditiis minus vero totam sequi quis corporis earum incidunt, dignissimos est?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim saepe animi et asperiores a voluptates deserunt velit facilis alias blanditiis minus vero totam sequi quis corporis earum incidunt, dignissimos est?Lorem ipsum, dolor sit amet consectetur adipisicing elit....

CSS

.modal.show  {
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-content:center;
  align-items: flex-start;
}

.modal-body {
  padding: 0;
  margin: 0;
}

.close {
  color: #aaa;
  position: absolute;
  /* background: blue !important; */
  border: 0;
  top: 0;
  z-index: 99999;
  right: 3%;
  float: none;
  opacity: 1;
  font-size: 40px;
  font-weight: 400;
}


.modal-backdrop.modal-backdrop-transparent {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
  opacity: .9;
  filter: alpha(opacity=90);
}
.modal-backdrop.modal-backdrop-fullscreen {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: .97;
  filter: alpha(opacity=97);
}

.modal-fullscreen {
  background: #fff;
    min-width: 100%;
    margin: 0;
}

	

@media (min-width: 768px) {
  .modal-fullscreen .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .modal-fullscreen .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .modal-fullscreen .modal-dialog {
    width: 100%;
  }
}



.modal-dialog {
	position:fixed;
	padding: 0;
  max-width: 100%;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow:auto;
}

JavaScript

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
// document ready  
});


window.onload = function() {
 // executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
  
  
// window load  
};