JSFiddle - React, Tailwind, and code Playground

HTML

<style>
    td.input {
        width: 50%;
        max-width: 50%;
    }

    table {
        border-spacing: 10px 0;
        border-top: 1px solid black;
    }

    th,
    td {
        text-align: center;
        font: smaller;
        border: 1px solid black;
       
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    div.showinline {
        display: flex;
        align-items: center;
        vertical-align:middle;
    }
</style>

<div class="att-area" id="myModalBodyDiv">
                            
    <div class="table-responsive">
        <div id="attendance_wrapper" class="dataTables_wrapper no-footer"><div id="attendance_filter" class="dataTables_filter"><label>Search:<input type="search" class="" placeholder="" aria-controls="attendance"></label></div><table id="attendance" class="table cell-border dataTable no-footer" style="width: 100%;" role="grid" aria-describedby="attendance_info">
            <thead class="thead-light">
                <tr role="row"><td class="hidden" rowspan="1" colspan="1"></td><td style="text-align:center;vertical-align:middle;width:200px" rowspan="1" colspan="1">Employee</td><td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">In Time</td><td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Out Time </td><td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Break Hrs</td><td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Net Hrs</td><td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Clock In</td><td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Clock Out</td><td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Normal Attendance</td><td style="text-align:center;vertical-align:middle;" rowspan="1" colspan="1">Scheduled DayOff</td><td...

JavaScript

<script type="text/javascript">
    $("document").ready(function () {

     
        var table = $('#attendance').DataTable({
           paging: false
        });
});