JSFiddle - React, Tailwind, and code Playground

by geekrose Lee

HTML

<div class="leftbig"> Left Big</div>

<div class="rightcontainer">

        <div class="righttop"> Right Top</div>

        <div class="rightsmall1">Right Small 1</div>

        <div class="rightsmall2">Right Small 2</div>

</div>

CSS

body {
    background: #FFFFD1;

}

.leftbig {

    width: 500px;
    height: 500px;
    background: #FFF;
    float: left;
    margin: 5px ;
    border: 2px solid;
    border-color: #FF0000;

}

.rightcontainer{

    width: 550px;
    margin: 2px ;
    float: left;

}

.righttop {

    width: 480px;
    height: 250px;
    float: left;
    margin: 5px ;
    background: #FFF;
    border: 2px solid;
    border-color: #FF0000;
}

.rightsmall1 {

    width: 230px;
    height: 230px;
    float: left;
    margin: 5px ;
    background: #FFF;
    border: 2px solid;
    border-color: #FF0000;
}

.rightsmall2 {

    width: 230px;
    height: 230px;
    float: left;
    margin: 5px ;
    background: #FFF;
    border: 2px solid;
    border-color: #FF0000;
}