JSFiddle - React, Tailwind, and code Playground

by cristian_cena

HTML

<div class='tarea'> 
    <div class='rojo'>div 1</div>            
    <div class='verde_celeste'> 
        <div class='verde'>div 2</div>    
        <div class='celeste'>div 3</div>       
    </div>          
    <div class='amarillo'>div 4</div> 
</div>

CSS

body{
        font-family: Arial;
        font-size: 14px;
    }
        .tarea{
            overflow: hidden;
            width: 700px;
            border: 5px solid #000;
        }
            .tarea div{
                text-align: center;
                text-transform: uppercase;
            }
            .rojo, .verde_celeste, .amarillo{
                float: left;
                height: 200px;
                line-height: 200px;
            }
            .rojo{
                width: 300px;
                background: #ed1c24;
            }
            .verde_celeste{
                width: 190px; /* + (5*2 = 10px) = 200px*/
                overflow: hidden;
                border-left: 5px solid #000;
                border-right: 5px solid #000;
            }
                .verde, .celeste{
                    float: left;
                    line-height: 100px;
                }
                .verde{
                    width: 200px;
                    height: 100px;
                    background: #22b14c;
                }
                .celeste{
                    width: 200px;
                    height: 95px; /* + 5px = 100px */
                    border-top: 5px solid #000;
                    background: #00a2e8;
                }    
            .amarillo{
                width: 200px;
                background: #fff200;
            }