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">
<table id="example" class="display" style="width:100%">     
    </table>

CSS

.background {
 background-color: blue;
}

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

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

JavaScript

/* $(document).ready(function() {
    $('#example').DataTable();
} );
 */
 
 
 const topData = [
 {title: "Car Sales", firstTitle: 'Walk ins', firstRevenue: 2002, secondTitle: 'Appointments', secondRevenue: 3021, thirdTitle: 'Online', thirdRevenue: 30421}]
 
    var table = $('#example').DataTable({
        "columnDefs": [
            {
                "targets": [1, 2],
                "className": 'dt-body-right'
            },
        ],
        data: topData,
        responsive: true,
        paging: true,
        searching: false,
        bInfo: true,
        "order": [[2, "desc"]],
        "pageLength": 20,
        columns: [
            {
                data: "title",
                title: "Title",
            }, {
            		data: 'firstTitle',
                title: 'Highest Revenue'
           }, {
           data: 'firstRevenue',
           title: 'Highest Revenue'
           }, {
           data: 'secondTitle',
           title: 'Second Highest Revenue'
           }, {
           data: 'secondRevenue',
           title: 'Second Highest Revenue'
           }
        
        ]
    });