JSFiddle - React, Tailwind, and code Playground
by KARTHIKEYAN K
HTML
<div id="outer">
</div>
<div id="inner">
</div>
<div id="inner1">
</div>
<!--<div id="father">-->
<!--<div id="son1">one</div>-->
<!--<div id="son2">two</div>-->
<!--</div>-->
<!--<div id="One"></div>-->
<!--<div id="Two"></div>-->
<!--<div id='outer2'>-->
<!--<div id='inner2'>-->
<!--</div>-->
<!--text-->
<!--</div>-->
<!--<div id='outer23'>-->
<!--<div id='inner23'>-->
<!--</div>-->
<!--text-->
<!--</div>-->
CSS
body {
margin: 0;
}
/*#One {*/
/*height: 100vh;*/
/*background-color: springgreen;*/
/*}*/
/*#Two {*/
/*height: 100vh;*/
/*background-color: coral;*/
/*}*/
/*#outer2 {*/
/*padding-left: 23px;*/
/*position: absolute;*/
/*height: 100%;*/
/*width: 100%;*/
/*border: 1px solid red;*/
/*}*/
/*#inner2 {*/
/*left: 0;*/
/*position: absolute;*/
/*height: 100%;*/
/*height: 100%;*/
/*border: 1px solid black;*/
/*}*/
/*#outer23 {*/
/*padding-left: 23px;*/
/*position: absolute;*/
/*height: 100%;*/
/*width: 100%;*/
/*border: 1px solid springgreen;*/
/*}*/
/*#inner23 {*/
/*left: 0;*/
/*position: absolute;*/
/*height: 100%;*/
/*height: 100%;*/
/*}*/
/*#father {*/
/*position: relative;*/
/*height: 100%;*/
/*}*/
/*#son1 {*/
/*position: absolute;*/
/*height: auto;*/
/*background-color: springgreen;*/
/*top: 0;*/
/*}*/
/*#son2 {*/
/*position: absolute;*/
/*height: 400px;*/
/*width: 100%;*/
/*bottom: 0;*/
/*background-color: coral;*/
/*}*/
#outer {
height: 100vh;
width: 100%;
position: relative;
border: 1px solid red;
top: 0;
bottom: 0;
background-color:red;
}
#inner {
width: 100%;
height: 100vh;
position: absolute;
border: 1px solid blue;
background-color:blue;
}
#inner1 {
width: 100%;
height: 100vh;
border: 1px solid blue;
background-color:black;
}