JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div style="background-color:#f5f9ff;border:1px solid gray;padding:3px 10px 10px 10px;clear:both">
        <button id="add-rows-button" style="margin:4px 0 8px 0;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Add rows</span></button>
        <div id="details-grid_wrapper" class="dataTables_wrapper" role="grid" style=""><div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"></div><div class="dataTables_scroll"><div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px; width: 100%;"><div class="dataTables_scrollHeadInner" style="width: 1156px; padding-right: 0px;"><table class="standard-grid no-sort dataTable" style="margin-left: 0px; width: 1156px;"><thead>
                <tr role="row"><th class="ui-state-default" role="columnheader" rowspan="1" colspan="1" style="width: 131px; padding-bottom: 5px;"><div class="DataTables_sort_wrapper">Code<span class="DataTables_sort_icon"></span></div></th><th class="ui-state-default" role="columnheader" rowspan="1" colspan="1" style="width: 72px; padding-bottom: 5px;"><div class="DataTables_sort_wrapper">Hours<span class="DataTables_sort_icon"></span></div></th><th class="ui-state-default" role="columnheader" rowspan="1" colspan="1" style="width: 72px; padding-bottom: 5px;"><div class="DataTables_sort_wrapper">Amount<span class="DataTables_sort_icon"></span></div></th><th class="ui-state-default" role="columnheader" rowspan="1" colspan="1" style="width: 72px; padding-bottom: 5px;"><div class="DataTables_sort_wrapper">Rate<span class="DataTables_sort_icon"></span></div></th><th class="ui-state-default" role="columnheader" rowspan="1" colspan="1" style="width: 106px; padding-bottom: 5px;"><div class="DataTables_sort_wrapper">Rate Code<span class="DataTables_sort_icon"></span></div></th><th class="ui-state-default" role="columnheader"...

CSS

select {
  border-width: 1px;
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;
  display: block;
}

input {
  display: block;
}

:focus {
  outline: 0;
}

#details-grid select:focus {
outline:revert;
  outline-color: skyblue;
}