JSFiddle - React, Tailwind, and code Playground

by Blanca B

HTML

<div id="izquierda">
    <div id="uno"></div>
        <br>
    <div id="tres"></div>
</div>
    
<div id="derecha">
    <div id="dos"></div>
        <br>
    <div id="cuatro"></div>
</div>

CSS

#uno {
    margin: 15px 10px;
    width: 200px;
    height: 160px;    
    background-color: pink;
    box-shadow: 10px 10px 1px;
}

#dos {
    margin-top: 15px;
    margin-right: 30px;
    width: 200px;
    height: 160px;    
    background-color: pink;
    box-shadow: 10px -10px 1px;
}

#tres {
    margin: 15px 10px;
    width: 200px;
    height: 160px;    
    background-color: pink;
    box-shadow: -10px 10px 1px;
}

#cuatro {
    margin-top: 30px;
    margin-right: 30px;
    width: 200px;
    height: 160px;    
    background-color: pink;
    box-shadow: -10px -10px 1px;
}

#izquierda {
    float: left;
}

#derecha {
    float: right;
}