JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head></head>
    <body>
        <div id="wrap">
            <div id="top">Top Div</div>
            <div id="middle">Middle Div</div>
            <div id="bottom">Bottom Div</div>
        </div>
    </body>
</html>

CSS

#wrap{
    margin:0px auto;
    width:300px;
}
#top{
   // top:20px; /* Why don't divs below this position relative to this position? */
    
    position:relative;
    height:25px;
    width:100%;
    background-color:#888;
    color:#FFF;
    text-align:center;
}
#middle{
    position:relative;
    height:125px;
    width:100%;
    text-align:center;
    background-color:#ccc;
}
#bottom{
    position:relative;
    background-color:#333;
    color:#CCC;
    text-align:center;
}