JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<body>
  <div class="first">
<div class="second">
<div class="third">

<h1 class="center">The Content</h1>

<p class="cen">My Inner Content</p>

</div>
</div>
</div>
</body>

CSS

.first {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

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

.third {
    margin: auto; 
    background-color: #cb1c69;
    width: 100%/*whatever width you want*/;
}
.center
{
    text-align:center;
    color:white;
}
.cen
{
    text-align:center;
    color:white;
}