JSFiddle - React, Tailwind, and code Playground

HTML

<div class="colCenter" id="two">
    
      
    </div>
    <div class="colRight" id="three">
          <div class="first_menu">

   
</div>

<div class="dati_societari">
    
</div>
    </div>

CSS

.colCenter{
    position:absolute;
    top:0;
    left:18%;
    height: 100%;
    width: 72%;
    background: #ccc;
    border-left: 0px solid #333;
    border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
    /*border-radius: 0.2px 0px 0px 0.2px;*/
    z-index:100;
    overflow:hidden !important;
    box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
    -webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
    -moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
}

.colRight{
    position:absolute;
    top:0;
    right:0;
    background:#fff;
    height:100%;
    width:18%;    
    z-index:1000;
    border-left: 0px solid #333;
    /*border-radius: 70px 0px 0px 70px / 250px 0px 0px 250px;*/
    border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
    box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
    -webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
    -moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
    overflow:hidden !important;
}






.first_menu{
    height:10%;
    width:100%;
    background:#714d8f;    
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}


.dati_societari{
    height:8%;
    width:100%;
    background:#9a9a9a;    
    position:absolute;
    bottom:50px;
    left:0;
    z-index:2;
    text-align:center;
}


.social{
    position:absolute;
    width:100%;
    bottom:5%;
    left:20%;    
}

.img_social{
    opacity:0.7;    
    
    transition-property: opacity; /*standard*/
    transition-duration: 0.4s;
 
    -webkit-transition-property: opacity; /*Safari e Chrome */
     -webkit-transition-duration: 0.4s;
         
    -o-transition-property: opacity;      /*Opera*/
       -o-transition-duration: 0.4s;
         
    -moz-transition-property: opacity;    /*Firefox*/
    -moz-transition-duration: 0.4s;    
}