JSFiddle - React, Tailwind, and code Playground

by kotsoft

HTML

4 disease groups

<div class="disease_groups_graph">
    <div class="green">
        Common, High Impact
    </div>
    <div class="red">
        Rare, High Impact
    </div>
    <div class="blue">
        Jewish Heritage
    </div>
    <div class="yellow">
        Variable Spectrum
    </div>
</div>

CSS

.disease_groups_graph {
    width:600px;height:600px;position:relative;
}

.disease_groups_graph .green {
    background:rgba(75,171,85,.5);position:absolute;width:50%;height:50%;left:50%;
}

.disease_groups_graph .red {
    background:rgba(227,117,77,.5);position:absolute;width:50%;height:50%;left:50%;top:50%;
}

.disease_groups_graph .blue {
    background:rgba(49,160,212,.5);position:absolute;width:50%;height:50%;left:25%;top:25%
}

.disease_groups_graph .yellow {
    background:rgba(252,198,20,.5);position:absolute;width:50%;height:50%;top:25%;
}