JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div id="container">
 <div id="one">1</div>
 <div id="two">2</div>
 <div id="three">3</div>
 <div id="four">4</div>
 <div id="five">5</div>
 <div id="six">6</div>
 <div id="seven">7</div>
</div>

CSS

#container
{
    width:100%;
    height:100%;
}
#one
{
    width:50%;
    background:red;
   
}
#two
{
    width:50%;
    background:green;
    float:left;vertical-align:top;
    
}
#three
{
    width:50%;
    background:blue;
    float:left;
    margin-top:-20px;
}
#four
{
    width:50%;
    background:gray;
    float:left;
    margin-left:50%;
    margin-top:-20px;
    
}
#five
{
    width:50%;
    background:violet;
    float:left;
    margin-left:50%;
    
}
#six
{
    width:50%;
    background:gold;
    float:left;
    margin-left:50%;
   
}
#seven
{
    width:50%;
    background:pink;
    float:left;
    margin-left:50%;
   
}