JSFiddle - React, Tailwind, and code Playground

by Persijn Kwekkeboom

HTML

<div class="main">
    <div class="center"></div>
    <div class="leftTop"></div>
    <div class="rightTop"></div>
    <div class="leftBottom"></div>
    <div class="rightBottom"></div>
</div>

CSS

.main {
    position: relative;
    width:80%;
    height:100%;
}
.main:after {
    content:"";
    display:table;
    clear:both;
}
.rightTop {
    float:right;
    background-color:red;
    min-width:50%;
    height:250px;
}
.leftTop {
    float:left;
    background-color:blue;
    min-width:50%;
    max-width:50%;
    height:250px;
}
.rightBottom {
    float:right;
    background-color:yellow;
    min-width:50%;
    height:250px;
}
.leftBottom {
    float:left;
    background-color:orange;
    min-width:50%;
    max-width:50%;
    height:250px;
}
.center {
    position: absolute;
    height: 400px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color:black;
    width:400px;
    border-radius:50%;
}