JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal">
  <div class="modal__head"> Title </div>
  <div class="modal__body">
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
    <p>Modal body</p>
  </div>
  <div class="modal__footer">Footer here</div>
</div>

CSS

.modal {
  min-width: 500px;
  max-width: 800px;
  border-radius: 4px;
  max-height: 65vh;
  overflow: hidden;
  background-color: white;
  position: fixed;
  top: 15vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 12;
  border: 1px solid teal;
}

.modal__head,
.modal__footer {
  height: 60px;
}

.modal__body {
  border: 1px solid red;
}