JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div><div class="something-semantic one">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div><div class="something-semantic two">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>

CSS

.something-semantic {
   display: table;
   width: 150px; float:left;
   background: green;
}
.something-else-semantic {
    height: 120px;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
.one{ background: red;}
.two{ background: brown;}