JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">


  <div class="progress-bar">
      <div class="determinate-color" style="width: 10%"></div>
  </div>
  
  <br/>




<table id="example" class="display" style="width:100%">     
    </table>

CSS

.background {
 background-color: blue;
}

.backgroud-red {
  background-color: red;
}

.background-yellow {
  background-color: yellow;
}

.red-text {
  color: red;
}

.progress-bar {
    position: relative;
    height: 25px;
    display: block;
    width: 100%;
    background-color: transparent;
    overflow: hidden;
}

.determinate-color {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #002F65;
    transition: width .3s linear;
}

JavaScript

/* $(document).ready(function() {
    $('#example').DataTable();
} );
 */
 
 const topData = [
 {title: "Car Sales", firstTitle: 'Walk ins', firstRevenue: '30%' , secondTitle: 'Appointments', secondRevenue: '27%', thirdTitle: 'Online', thirdRevenue: '5%'}]
 
    var table = $('#example').DataTable({
columnDefs: [
            { "width": "15%", "targets": [0] }
        ],
        data: topData,
        responsive: true,
        paging: true,
        searching: false,
        bInfo: true,
        "order": [[2, "desc"]],
        "pageLength": 20,
        columns: [
            {
                data: "title",
                title: "Title",
            }, {
            		data: null,
                title: 'Highest Revenue',
                render: function (data, type, row) {
                  return row.firstTitle + ' ' + row.firstRevenue + '' + '<span class="progress-bar"> <span class="determinate-color" style="width:' + row.firstRevenue + '"> </span> </span>'
                }
           }, {
           data: null,
           title: 'Second Highest Revenue',
                render: function (data, type, row) {
                  return row.secondTitle + ' ' + row.secondRevenue + '' + '<span class="progress-bar"> <span class="determinate-color" style="width:' + row.secondRevenue + '"> </span> </span>'
                }
            }, {
           data: null,
           title: 'Second Highest Revenue',
                render: function (data, type, row) {
                  return row.thirdTitle + ' ' + row.thirdRevenue + '' + '<span class="progress-bar"> <span class="determinate-color" style="width:' + row.thirdRevenue + '"> </span> </span>'
                }
            }
        
        ]
    });