JSFiddle - React, Tailwind, and code Playground

HTML

<div class="noload">
        <span class="loadtext" id="loadspan">40%</span>
        <div class="load" id="loaddiv">
        </div>
    </div>
    <br />
    <br />
    <input value="0%" type="button" onclick="$('#loaddiv').css('width',  '0%'); $('#loadspan').text('0%');" />
    <input value="10%" type="button" onclick="$('#loaddiv').css('width',  '10%'); $('#loadspan').text('10%');" />
    <input value="50%" type="button" onclick="$('#loaddiv').css('width',  '50%'); $('#loadspan').text('50%');" />
    <input value="75%" type="button" onclick="$('#loaddiv').css('width',  '75%'); $('#loadspan').text('75%');" />
    <input value="100%" type="button" onclick="$('#loaddiv').css('width',  '100%'); $('#loadspan').text('100%');" />

CSS

.load{    
width: 50%;
height: 12px;
background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);  
-moz-border-radius: 4px;
border-radius: 4px;
}

.noload{
width: 100px;    
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=); 

-moz-border-radius: 4px;
border-radius: 4px;
    border: 1px solid #999999;    
    position: relative;
}

.loadtext {
    font-family: Consolas;    
font-size: 11px;
    color: #000000;
     position: absolute;
    bottom: -1px;
  
 left: 45%;       
}