JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>He was once a little green slab of clay. Gumby! You should see what Gumby can do today. Gumby!  .
      He was once a little green slab of clay. Gumby! You should see what Gumby can do today. Gumby! He can walk into any book, with his pony pal Pokey, too. If you've got a heart then Gumby's a part of you.
 
</p>
    </div>
  </div>
</div>

CSS

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}