JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#thing1 {	
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			z-index:1000;			
			background: blue;
}
#thing2 {	
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			z-index:1000;			
			background: red;
}
#thing3 {	
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			z-index:1000;			
			background: green;
}
#text {
    width: 100px;
    height: 100px;
    margin: auto;
    position: absolute;
    top:0;
	bottom: 0;
	left: 0;
	right: 0;
}