JSFiddle - React, Tailwind, and code Playground

by fripouille

HTML

<div id="wrapper">
    <div class="block_1"></div>
    <div class="block_2"></div>
    <div class="block_3"></div>
    <div class="block_4"></div>
</div>

CSS

#wrapper {
    margin:0 auto;
    padding:0;
    width:98%;
    position:relative;
    clear:both;
}
.block_1 {
    float:left;
    width:31%;
    height: 50px;
    background-color:red;
}
.block_2 {
    float:left;
    width:31%;
    height: 50px;
    background-color:green;
}
.block_3 {
    float:left;
    width:62%;
    height: 50px;
    background-color:blue;
}
.block_4 {
    float:left;
    width:31%;
    height: 50px;
    background-color:orange;
}

@media screen and (max-width: 800px) {

   .block_1 {
    width:48%;
}
.block_2 {
    width:48%;
} 
    
 .block_3 {
    width:100%;
}
.block_4 {
    float:left;
    width:100%;
}   
    

}