JSFiddle - React, Tailwind, and code Playground

by sheshu036

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<table class="table table-striped" id="table">
    <thead>
        <tr>
            <th>#</th>
            <th style="width:160px;">Rank</th>
            <th>Employee</th>
            <th>Tags</th>
            <th>Submissions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td class="value">100</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td class="value">200</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@tat</td>
        </tr>
        <tr>
            <td>3</td>
            <td class="value">30</td>
            <td>Silop</td>
            <td>the champ</td>
            <td>@twitter</td>
        </tr>
        <tr>
            <td>4</td>
            <td class="value">20</td>
            <td>Mathew</td>
            <td>Set</td>
            <td>@twitter</td>
        </tr>
        <tr>
            <td>5</td>
            <td class="value">30</td>
            <td>Mathew</td>
            <td>Set</td>
            <td>@twitter</td>
        </tr>
        <tr>
            <td>6</td>
            <td class="value">100</td>
            <td>kilop</td>
            <td>kilop</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

CSS

.progress {
    background: transparent !important;
    box-shadow: none !important;
}
table .progress {
    margin-bottom: 0;
}
.progress-bar {
    border-radius: 4px !important;
}
{
    font-size: 98% !important
}
.progress-bar {
    -webkit-transition: width 1.5s ease-in-out;
    transition: width 1.5s ease-in-out;
}
h3 {
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
}
#right {
    margin-left: 20%;
}
#left {
    float: left;
    width: 80%;
}

JavaScript

var genCol = [];
for (var i=0; i<=100; i++)
    genCol.push('#'+(Math.random()*0xFFFFFF<<0).toString(16));

$("#table").children("tbody").children("tr").each(function (i) {
    var col = $(this).children("td.value");
    
    var pro = '<div id="left"><div class="progress" id="percentage"><div class="progress-bar" style="display:block; float:right; width:'+col.html()+ '%;background:'+genCol[col.html()]+'"></div></div></div><div id="right">&nbsp;' + col.html() + '</div>';
    
    col.html(pro);
});