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 bar = "<br> test </b>" 
 
 const topData = [
 {title: "Car Sales", firstTitle: 'Walk ins', firstRevenue: '20%' , secondTitle: 'Appointments', secondRevenue: '17%', thirdTitle: 'Online', thirdRevenue: '5%'}]
 
    var table = $('#example').DataTable({
    
    columnDefs : [
   { targets : [1,2],
     render : function(data, type, row) {
        return '<div class="progress-bar"> <div class="determine-color" style="width:10%"> </div> </div>'
     }     
   }
],

        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 + '' + '<div cclass="progress-bar"> <div class="determine-color" style="width:10%"> </div> </div>'
                }
           }, {
           data: null,
           title: 'Second Highest Revenue',
                render: function (data, type, row) {
                  return row.secondTitle + ' ' + row.secondRevenue
                }
            }
        
        ]
    });