JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<div>25</div>
<div>4</div>
<div>13</div>

CSS

div {
    background: orange;
    display: block;
    position: absolute;
    text-align: center;
    line-height: 0;
}

JavaScript

var max = 0, multiplier = 100;
$("div").each(function(i,el){
    max = Math.max(max, parseInt($(el).text()));
});

$("div").each(function(){
    var r = parseInt($(this).text())/max;
    $(this).css({
        width : r * multiplier,
        height : r * multiplier,
        "line-height" : r*multiplier + "px",
        "border-radius" : r*multiplier,
        left : r*multiplier
    })
})