JSFiddle - React, Tailwind, and code Playground

by James Butler

HTML

<button id="plus5">Increase Tank by 5</button>
<div class="loadingTank"></div>

CSS

.loadingTank {
    display:inline-block;
    border:2px solid black;
    margin:15px;
    max-width:350px;
    height:500px;
    width:30%;
    background-color:#808080;
    box-shadow: rgb(56, 56, 56) 0px -200px 0px -2px inset;
    /*Change this value for leveling*/
    float:left;
    position:relative;
}
.loadingTank:before {
    content:"";
    width:70%;
    height:100%;
    float:left;
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(208, 208, 208, 0)));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#00d0d0d0', GradientType=1);
}
.loadingTank:after {
    /*idea is for this to be the 'leveling'*/
    content:"";
    width:10%;
    height:100%;
    border-radius:10px;
    border:2px solid black;
    background-color:lightGray;
    margin-right:10%;
    float:right;
    font-size:100%;
    background: rgb(0, 0, 0);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128,...

JavaScript

$('#plus5').click(function () {
    var myVal = $('.loadingTank').css("box-shadow");       

    alert(myVal + " is currently");

});