JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<table id="hor-minimalist-a" summary="Employee Pay Sheet">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>


<table id="hor-minimalist-b" summary="Employee Pay Sheet">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>


<table id="ver-minimalist" summary="Most Favorite Movies">
<thead>
<tr>
<th scope="col">Comedy</th>
<th scope="col">Adventure</th>
<th scope="col">Action</th>
<th scope="col">Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>Scary Movie</td>
<td>Indiana Jones</td>
<td>The Punisher</td>
<td>Wall-E</td>
</tr>
<tr>
<td>Epic Movie</td>
<td>Star Wars</td>
<td>Bad Boys</td>
<td>Madagascar</td>
</tr>
<tr>
<td>Spartan</td>
<td>LOTR</td>
<td>Die Hard</td>
<td>Finding Nemo</td>
</tr>
<tr>
<td>Dr. Dolittle</td>
<td>The Mummy</td>
<td>300</td>
<td>A Bug&#8217;s Life</td>
</tr>
</tbody>
</table>


<table id="box-table-a" summary="Employee Pay Sheet">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin...

CSS

#leftcolumn dl {
    display: block;
    margin-left: 20px;
}
#leftcolumn dt {
    font-size: 120%;
    color: #999;
    margin: 10px 0 0;
    padding: 0;
}
#leftcolumn dt.imp strong {
    font-weight: normal;
    color: red;
}
#leftcolumn dd {
    margin: 0;
    padding: 0;
}
#hor-minimalist-a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    background: #fff;
    width: 480px;
    border-collapse: collapse;
    text-align: left;
    margin: 20px;
}
#hor-minimalist-a th {
    font-size: 14px;
    font-weight: normal;
    color: #039;
    border-bottom: 2px solid #6678b1;
    padding: 10px 8px;
}
#hor-minimalist-a td {
    color: #669;
    padding: 9px 8px 0;
}
#hor-minimalist-a tbody tr:hover td {
    color: #009
}
#hor-minimalist-b {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    background: #fff;
    width: 480px;
    border-collapse: collapse;
    text-align: left;
    margin: 20px;
}
#hor-minimalist-b th {
    font-size: 14px;
    font-weight: normal;
    color: #039;
    border-bottom: 2px solid #6678b1;
    padding: 10px 8px;
}
#hor-minimalist-b td {
    border-bottom: 1px solid #ccc;
    color: #669;
    padding: 6px 8px;
}
#hor-minimalist-b tbody tr:hover td {
    color: #009
}
#ver-minimalist {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
    margin: 30px 30px 30px 15px;
}
#ver-minimalist th {
    font-weight: normal;
    font-size: 14px;
    border-bottom: 2px solid #6678b1;
    border-right: 30px solid #fff;
    border-left: 30px solid #fff;
    color: #039;
    padding: 8px 2px;
}
#ver-minimalist td {
    border-right: 30px solid #fff;
    border-left: 30px solid #fff;
    color: #669;
    padding: 12px 2px 0;
}
#box-table-a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    width: 480px;
   ...