JSFiddle - React, Tailwind, and code Playground

by derekstory

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

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