JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal">
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Some content to fill this demo modal. It's for an article about Vertical Media Queries in CSS!</p>
    <a class="button" href="#">Sign up</a>
  </div>
</div>

CSS

body {
  font-family: 'Arial';
}

h2 {
  font-size: 2em;
  font-weight: bolder;
  margin-bottom: 0.5em;
}

p {
  font-size: 1em;
  line-height: 1.45;
  margin-bottom: 1em;
}

.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  max-width: 600px;
  margin: 1em auto;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  padding: 2em;
}

.button {
  display: inline-block;
  background: #4ea7ea;
  padding: 1em 1.5em;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
}

@media (min-height: 400px) and (min-width: 500px) {
  .modal-content {
    position: absolute;
    left: 50%;
    top: 30px;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}