JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div class="row">
    <div class="cell">
        <div class="rating"></div>
        Damage<br/>
        <div class="bar-container">
            <div class="bar-9"></div>
        </div>
        Utility<br/>
        <div class="bar-container">
            <div class="bar-1"></div>
        </div>
        Survivability<br/>
        <div class="bar-container">
            <div class="bar-6"></div>
        </div>
        Complexity<br/>
        <div class="bar-container">
            <div class="bar-3"></div>
        </div>
    </div>
    <div class="cell">
        <div class="role"></div>
            sdfds<br/>dsfdsfs
    </div>
</div>

CSS

* {
    box-sizing:border-box;
}
body {
    margin:0px;
}

.row {
    width:100%;
    display:table;
}

.cell {
    display:table-cell;
    width:50%;
    position:relative;
    padding:0px 10px;
}

.cell:first-child {
    padding-left:15px;
}

.cell:last-child {
    padding-right:15px;
}

.rating {
    background:#999;
    position:absolute;
    bottom:0;
    top:0;
    left:10px;
    right:5px;
    z-index:-10;
}

.role {
    background:#999;
    position:absolute;
    bottom:0;
    top:0;
    left:5px;
    right:10px;
    z-index:-10;
}

.bar-container {
    background:#3a2d57;
    height:0.5em;
    width:100%;
}

[class*="bar-"]{
    height:0.5em;
}

.bar-1, .bar-2, .bar-3, .bar-4 {
    background:#58BAFF;
}

.bar-5, .bar-6, .bar-7 {
    background:#A27CE7;
}

.bar-8, .bar-9, .bar-10 {
    background:#FF77FD;
}

.bar-1 {
    width:10%;
}

.bar-2 {
    width:20%;
}

.bar-3 {
    width:30%;
}

.bar-4 {
    width:40%;
}

.bar-5 {
    width:50%;
}

.bar-6 {
    width:60%;
}

.bar-7 {
    width:70%;
}

.bar-8 {
    width:80%;
}

.bar-9 {
    width:90%;
}

.bar-10 {
    width:100%;
}