JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/vader/jquery-ui.css">
<table>
    <tr>
        <td>With text:</td>
        <td><div class="progress" data-value="80"><span>80%</span></div></td>
    </tr>
    <tr>
        <td>With link:</td>
        <td><div class="progress" data-value="80"><span><a href="www.google.com">40000/50000</a></span></div></td>
    </tr>
    <tr>
        <td>With text (value 0):</td>
        <td><div class="progress" data-value="0"><span>0%</span></div></td>
    </tr>
    <tr>
        <td>Without content:</td>
        <td><div class="progress" data-value="80"></div></td>
    </tr>
</table>

CSS

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}

JavaScript

$(document).ready(function() {
    $(".progress").each(function() {
        var progressValue = $(this).data("value");
        $(this).progressbar({
            value: progressValue
        }).children("span").appendTo(this);
    });
});