JSFiddle - React, Tailwind, and code Playground

HTML

<div class="head-container">
                 <div class="header">Header</div>
             </div>            
            <div class="menu-container">
                <div class="menu">Menu</div>
            </div>            
            <div class="promo-background">
              <div class="promo-container">
                <div class="promo1">
                    Promo 1 Promo 1<br>
                    Promo 1 Promo 1<br>
                    Promo 1 Promo 1<br>
                    Promo 1 Promo 1<br>
                    Promo 1 Promo 1<br>
                    Promo 1 Promo 1<br>
                    Promo 1 Promo 1<br>
                    Promo 1 Promo 1<br>
                    </div>
                <div class="promo2">Promo 2</div>
              </div>
            </div>
            <div class="main-container">                
                <div class="sider">Right</div>
                <div class="main">Main</div>
                <div class="sidel">Left</div>              
            </div>
            <div class="footer-cointeiner">
                <div class="footer">Footer</div>   
            </div>

CSS

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}

.head-container {
    background: #34495e;
    min-height:45px;
    padding-top: 10px;
    
    }
.header {
    background: #c0392b;
    width: 340px;
    margin: 0px auto;
    min-height:25px;
    padding: 5px;
}
.menu-container {
    background: #3498DB;  
    
     }
.menu {     
    
    min-height: 25px;
    padding: 5px;
    width: 350px;
    margin: 0px auto;
}

.promo-background {
    background: #34495e;     
    min-height: 70px;
    padding-top: 10px;  
}
.promo-container {
    width:350px;
    margin: 0px auto;  
    min-height: 60px;  
 }
.promo1,.promo2{
    background: #c0392b; 
    float:left;
    
    min-height: 50px;
    width: 160px;      
    padding: 5px;
}
.promo1 {
    margin-right: 10px;  
}

.main-container {
    min-height: 120px;
    width: 350px;
    margin: auto ;
    padding-top: 10px; 
}
.sidel,.sider {
    min-height: 100px;
    background: #3498DB; 
    width: 60px;    
    padding: 5px;
        
}
.sider {
    float: right;  
 
}
.main {
    background: #3498DB; 
    width: 180px;
    float: right; 
    min-height: 100px;
    margin: 0px 10px;
    padding: 5px;
}

.footer {    
    padding: 5px;
    min-height: 25px;
    margin: auto;
    width: 340px;
    
    
} 
.footer-cointeiner {
    min-height: 35px;
    width: 450px;
    background: #34495e;
    
}


/*
    Используемые цвета:
    #34495e - мокрый асфальт
    #c0392b - красный
    #3498DB - синий
*/