JSFiddle - React, Tailwind, and code Playground

by andrewgsw

HTML

<div id="thing1">
    <div class="text">
        Thing 1!
    </div>
</div>
<div id="thing2">
    <div class="text">
        Thing 2!
    </div>
</div>
<!-- where are the others?-->
<div id="thing3">
    <div class="text">
        Thing 3!
    </div>
</div>

CSS

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