JSFiddle - React, Tailwind, and code Playground

by Jitendra Pal

HTML

<div id="header"> Fab </div>
<div id="main-container">
    <div class="item">Item1
        <div id="item1-container">
             <div class="sub-item">Inside Item1</div>
                         <div class="sub-item">Inside Item2</div>
                         <div class="sub-item">Inside Item3</div>
         </div>
    </div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>

CSS

#header{
    height:80px;
    font-size:50px;
}
#main-container{
    background-color:grey;
    display: flex;
    flex-direction:column;
    padding:2px;
    height:calc(100vh - 100px);

}
.item{
    background-color:pink;
    margin:10px;
    height:200px;
}
#item1-container{
    display:column;
    flex-direction:row;
    justify-content: space-around;
}
.sub-item{
    background-color:green;
    margin:5px;
}