JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-container">

    <div id="Zone1">
        This is zone 1
    </div>

    
    
    <div id="Zone2">
    This is zone 2
        <div id="Zone3">
            This is zone 3
        </div>
    </div> 

    <div id="Zone4">
        This is zone 4
    </div>
    
    
    </div>

CSS

#main-container
        {
            width: 1024px;
            margin: auto;                
        }
        
        #Zone1
        {   
            width:225px;
            height:430px;
            background:green;
            float:left;                        
        }
        
        #Zone2
        {            
            width:798px;
            height:768px;
            background:yellow;            
            float:right;
            z-index: 1
            position:relative
        }
        
        #Zone3
        {            
            width:245px; 
            height:376px;           
            background:blue;
            float:left;
            z-index: 2
            position:relative
        }
        
        #Zone4
        {            
            width:225px;
            height:338px;
            background:brown;
            float:left;              
                               
        }