JSFiddle - React, Tailwind, and code Playground

by andrewgsw

HTML

<div id="thing1" class="things">
    <div class="text">
        Thing 1!
    </div>
</div>
<div id="thing2" class="things">
    <div class="text">
        Thing 2!
    </div>
</div>
<div id="thing3" class="things">
    <div class="text">
        Thing 3!
    </div>
</div>

CSS

body, html {
        height: 100%;
        margin: 0; padding: 0;
    }
    .things {
        position: relative;
        height: 100%;
    }
    #thing1 {				
        background: blue;
    }
    #thing2 {
        background: red;
    }
    #thing3 {	
        background: green;
    }
    .text {
        width: 100px;
        height: 100px;
        margin: auto;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
    }