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...