JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css">
<script src="https://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js"></script>
<div style="max-width:100%; margin-left:auto; margin-right:auto; background-color:#c4bcbc; border-radius:15px; padding:10px; color:black" class="center">
    <table id="Table_Assets" class="outerroundedborder dt-responsive" style="width:auto; margin-bottom: 15px; margin-left:auto; margin-right:auto">
        <thead>
            <tr style="white-space:nowrap;">
                <th scope="col">Name:</th>
                <th scope="col">Type:</th>
                <th scope="col">Manufacturer</th>
                <th scope="col">Supplier</th>
                <th scope="col">Quantity</th>
                <th scope="col">Serial Number</th>
                <th scope="col">Location:</th>
                <th scope="col">Comments</th>
                <th scope="col">Computer Name</th>
                <th scope="col">Room Number</th>
                <th scope="col">Active</th>
                <th scope="col">Tech Fee</th>
                <th scope="col">Specifications</th>
                <th scope="col">Deploy Date</th>
                <th scope="col">User</th>
                <th scope="col">Department</th>
                <th scope="col">Building</th>
                <th scope="col">Tickets</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width:auto;">Doom DOOM!</td>
                <td>Laptop</td>
                <td>HP</td>
                <td>none</td>
                <td>33</td>
                <td>sdfg</td>
                <td>sdfg</td>
                <td>dfhgdfh</td>
                <td>Nebulus</td>
                <td>2345</td>
          ...

JavaScript

$(document).ready(function () {
    // Setup - add a text input to each footer cell
    $('#Table_Assets tfoot th').each(function () {
        var title = $('#Table_Assets thead th').eq($(this).index()).text();
        $(this).html('<input type="text" style="max-width:80px;" />');
    });

    // DataTable
    var table = $('#Table_Assets').DataTable({
        responsive: true,
            "autoWidth": false,
            "order": [
            [13, "desc"]
        ],
        initComplete: function () {
            var r = $('#Table_Assets tfoot tr');
            r.find('th').each(function () {
                $(this).css('padding', 8);
            });
            $('#Table_Assets thead').append(r);
            $('#search_0').css('text-align', 'center');
        },
    });

    $('#Table_Assets').resize()

    // Apply the search
    table.columns().every(function () {
        var that = this;

        $('input', this.footer()).on('keyup change', function () {
            that.search(this.value)
                .draw();
        });
    });
});