JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="0" width="100%" border="1" class="sTbl">
<thead>
<tr>
<th class="sCheck">
  <input type="checkbox" title="Select All/None" />
</th>
<th class="sMain" data-label="Sort by: "><a href="#">Main Item</a></th>
<th class="sBlur"><a href="#">Detail 1</a></th>
<th class="sBlur"><a href="#">Detail 2</a></th>
<th class="sBlur"><a href="#">Detail 3</a></th>
<th class="sBlur"><a href="#">Detail 4</a></th>
<th class="sBlur"><a href="#">Detail 6</a></th>
<th class="sBlur"><a href="#">Detail 7</a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="sCheck"><input type="checkbox" /></td>
<td class="sMain"><a href="#">Main Item 1</a></td>
<td class="sBlur" data-label="Detail 1: ">Detail 1 Here</td>
<td class="sBlur" data-label="Detail 2: ">Detail 2 Here</td>
<td class="sBlur" data-label="Detail 3: ">Detail 3 Here</td>
<td class="sBlur" data-label="Detail 4: ">Detail 4 Here</td>
<td class="sBlur" data-label="Detail 5: ">Detail 5 Here</td>
<td class="sBlur" data-label="Detail 6: ">Detail 6 Here</td>
</tr>
<tr>
<td class="sCheck"><input type="checkbox" /></td>
<td class="sMain"><a href="#">Main Item 1</a></td>
<td class="sBlur" data-label="Detail 1: ">Detail 1 Here</td>
<td class="sBlur" data-label="Detail 2: ">Detail 2 Here</td>
<td class="sBlur" data-label="Detail 3: ">Detail 3 Here</td>
<td class="sBlur" data-label="Detail 4: ">Detail 4 Here</td>
<td class="sBlur" data-label="Detail 5: ">Detail 5 Here</td>
<td class="sBlur" data-label="Detail 6: ">Detail 6 Here</td>
</tr>
<tr>
<td class="sCheck"><input type="checkbox" /></td>
<td class="sMain"><a href="#">Main Item 1</a></td>
<td class="sBlur" data-label="Detail 1: ">Detail 1 Here</td>
<td class="sBlur" data-label="Detail 2: ">Detail 2 Here</td>
<td class="sBlur" data-label="Detail 3: ">Detail 3 Here</td>
<td class="sBlur" data-label="Detail 4: ">Detail 4 Here</td>
<td class="sBlur" data-label="Detail 5: ">Detail 5 Here</td>
<td class="sBlur" data-label="Detail 6: ">Detail 6 Here</td>
</tr>
</tbody>
</table>

CSS

/* Some HTML Reset 
________________________________________________________________________ */    
HTML,BODY,TABLE,TBODY,TFOOT,THEAD,TR,TH,TD {
    margin:0;padding:0;border:0;font-size:100%;font:inherit;
    vertical-align:baseline;
    }
HTML,BODY {height:101%}
BODY {line-height:1;-webkit-text-size-adjust:100%}
TABLE {border-collapse:collapse;border-spacing:0}
BODY {font:16px/24px Arial, Verdana, Helvetica;padding:0;margin:0 auto}

/* Table 
________________________________________________________________________ */  

.sTbl {border-collapse:collapse;margin:24px 0;background:#FFF}
.sTbl THEAD TR {background:#EEE}
.sTbl TH {padding:9px 0;text-align:center;font-weight:bold}
.sTbl TH.sCheck {width:40px;text-align:center;background:#CFDBA1}
.sTbl TH.sMain {text-align:left;padding-left:9px}
.sTbl TH A:Link,
.sTbl TH A:Visited {color:#666}
.sTbl TH A:Hover,
.sTbl TH A:Active {color:#000}
.sTbl TBODY TR {background:#FBFDF7}
.sTbl TBODY TR:nth-child(even) {background:#EBF2CC}
.sTbl TD {padding:9px 0;text-align:center}
.sTbl TD.sCheck {width:40px;text-align:center;background:#DDEBAC}
.sTbl TBODY TR:nth-child(even) TD.sCheck {background:#D2E38E}
.sTbl TD.sMain {text-align:left;font-weight:bold;padding-left:9px}
.sTbl TD.sBlur {color:#666;font-size:12px}
@media only screen and (max-width: 800px) {
.sTbl {display:block;overflow:hidden;font-size:100%}
.sTbl THEAD {display:block;width:100%}
.sTbl THEAD TR {display:block;float:left;width:100%;padding:0;font-size:90%;text-align:right}
.sTbl TH {display:inline;width:auto;font-size:90%;padding:0}
.sTbl TH:After {content:" /\00A0"}
.sTbl TH:Last-child:After {content:""}
.sTbl TH.sCheck {display:none}
.sTbl TH.sMain {padding-left:0}
.sTbl TH.sMain:Before {content:attr(data-label);font-weight:bold}
.sTbl TH A {display:inline}
.sTbl TBODY {display:block;float:left;width:100%;line-height:20px}
.sTbl TBODY TR {display:block;float:left;width:100%;padding:0 0 10px 0;position:relative}
.sTbl TD {
   ...