JSFiddle - React, Tailwind, and code Playground

HTML

<div id="spanBlue"></div>
        <div id="spanGreen"></div>
        <div id="spanOrange"></div>
        <span id="spanRed"></span>

CSS

#spanBlue       {position: fixed;
                             top: 0px; left: 0px;
                             height: 100%;
                             width: 10%;
                             background-color: #4D9DB8;
                             border-right: 10px solid #045B6F;
                             z-index: 1;}    
                                    
            #spanGreen      {position: fixed;
                             top: 0px; left: 0px;
                             height: 10%;
                             width: 100%;
                             background-color: #A4AC79;
                             border-bottom: 10px solid #34655F;
                             z-index: 1;}    
                                  
            #spanOrange     {position: fixed;
                             top: 0px; left: 0px;
                             height: 10%;
                             width: 10%;
                             background-color: #FA9D26;
                             border-right: 10px solid #045B6F;
                             z-index: 2;}         

            #spanRed        {position: fixed;
                             bottom: 0px; right: 0px;
                             height: 90%;
                             width: 90%;
                             background-color: WHITE;
                             border-top: 10px solid #B52024;
                             border-left: 10px solid #B52024;
                             z-index: 3;}