JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circles">
        <div class="layout1">
                <!-- BEG Content -->
                <div>
                    dude
                </div>
                <div>
                    layout
                </div>
                <div>
                    one
                </div>
                <div>
                    dude
                </div>
                <!-- END Content -->
        </div>
        <div class="layout2">
                <!-- BEG Content -->
                <div>
                    dude
                </div>
                <div>
                    layout
                </div>
                <div>
                    two
                </div>
                <div>
                    dude
                </div>
                <!-- END Content -->
        </div>
        <div class="layout3">
                <!-- BEG Content -->
                <div>
                    dude
                </div>
                <div>
                    layout
                </div>
                <div>
                    three
                </div>
                <div>
                    dude
                </div>
                <!-- END Content -->        
        </div>
        <div class="layout4">
                <!-- BEG Content -->
                <div>
                    layout
                </div>
                <div>
                    four
                </div>
                <!-- END Content -->
        </div>
    </div>

CSS

.circles{
    margin:0px auto;
}
.circles > div {
    overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}

[class^=layout] > div {
    position: absolute;
    text-align: center;
}
/* BEG layout 1*/
.layout1 > :nth-child(1) {
    background-color:blue;
    width:100%;
    height: 20%;
    top: 0;
    left: 0;
}
.layout1 > :nth-child(2),
.layout1 > :nth-child(3) {
    width:50%;
    height: 60%;
    top: 20%;
}
.layout1 > :nth-child(2) {
    background-color:green;
    left: 0;        
}
.layout1 > :nth-child(3) {
    background-color:orange;
    left: 50%;       
}
.layout1 > :nth-child(4) {
    background-color:yellow;
    width: 100%;
    height: 20%;
    top: 80%;
    left: 0;
}
/* END layout 1*/
/* BEG layout 2*/
.layout2 > div {
    width:100%;
    height: 25%;
    left: 0;
}
.layout2 > :nth-child(1) {
    background-color:blue;
    top: 0;
}
.layout2 > :nth-child(2) {
    background-color:green;
    top: 25%;        
}
.layout2 > :nth-child(3) {
    background-color:orange;
    top: 50%;       
}
.layout2 > :nth-child(4) {
    background-color:yellow;
    top: 75%;
}
/* END layout 2*/
/* BEG layout 3*/
.layout3 > :nth-child(1) {
    background-color:blue;
    width:30%;
    height: 20%;
    top: 0;
    left: 0;
    text-align: right;
    padding: 40% 0;
}
.layout3 > :nth-child(2) {
    background-color:green;
    width: 40%;
    height: 60%;
    top: 0;    
    left: 30%;        
}
.layout3 > :nth-child(3) {
    background-color:orange;
    width: 70%;
    height: 40%;
    top: 60%;
    left: 30%; 
}
.layout3 > :nth-child(4) {
    background-color:yellow;
    width: 30%;
    height: 10%;
    top: 0;
    left: 70%;
    text-align: left;
    padding-top: 50%;    
}
/* END layout 3*/
/* BEG layout 4*/
.circles > .layout4 {
    background-color: red;
}
.layout4 >...