JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="tk" data-amount="40">
    40%
    <div class="lq"></div>
</div>

CSS

.tk{ /*Liquid Section*/
    position:relative;
    width:40%; 
    height:130px;
    padding-top:50px;
    margin: 0 auto;
    background:rgba(56,56,56,0.8);
    border-radius: 100%/40px;
    border-bottom:3px solid #000;
    text-align:center;
    z-index:1;
    overflow:hidden;

}
.tk:after, .lq{
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%;
    height:20%;
    z-index:-1;
}
.lq{
    background:rgba(128,128,128,0.99);
    height:80%;
    top:-2px;
    border-radius:100%/40px;
    border-bottom:3px solid #000;
}
.tk:after{
    height:20%;
    border:1px solid #000;
    border-radius:100%; /*makes circle at top*/
}

JavaScript

var amount = $('.tk').attr('data-amount'),
    height = amount * 80/100 + 20;

$('.lq').css({height : height + '%'});