JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<div class="table-wrapper">
<table cellspacing="0" id="tech-companies" class="enhanced">
	 <thead>
			<tr>
				 <th class="persist essential" id="co-0">Company</th>
				 <th class="essential" id="co-1">Last Trade</th>
				 <th class="optional" id="co-2">Trade Time</th>
				 <th class="essential" id="co-3">Change</th>
				 <th class="optional" id="co-4">Prev Close</th>
				 <th class="optional" id="co-5">Open</th>
				 <th id="co-6">Bid</th>
				 <th id="co-7">Ask</th>
				 <th id="co-8">1y Target Est</th>
			</tr>
	 </thead>
	 <tbody>
			<tr>
				 <th headers="co-0" class="persist essential">GOOG <span class="co-name">Google Inc.</span></th>
				 <td headers="co-1" class="essential">597.74</td>
				 <td headers="co-2" class="optional">12:12PM</td>
				 <td headers="co-3" class="essential">14.81 (2.54%)</td>
				 <td headers="co-4" class="optional">582.93</td>
				 <td headers="co-5" class="optional">597.95</td>
				 <td headers="co-6">597.73 x 100</td>
				 <td headers="co-7">597.91 x 300</td>
				 <td headers="co-8">731.10</td>
			</tr>      
			<tr>
				 <th headers="co-0" class="persist essential">AAPL <span class="co-name">Apple Inc.</span></th>
				 <td headers="co-1" class="essential">378.94</td>
				 <td headers="co-2" class="optional">12:22PM</td>
				 <td headers="co-3" class="essential">5.74 (1.54%)</td>
				 <td headers="co-4" class="optional">373.20</td>
				 <td headers="co-5" class="optional">381.02</td>
				 <td headers="co-6">378.92 x 300</td>
				 <td headers="co-7">378.99 x 100</td>
				 <td headers="co-8">505.94</td>
			</tr>      
			<tr>
				 <th headers="co-0" class="persist essential">AMZN <span class="co-name">Amazon.com Inc.</span></th>
				 <td headers="co-1" class="essential">191.55</td>
				 <td headers="co-2" class="optional">12:23PM</td>
				 <td headers="co-3" class="essential">3.16 (1.68%)</td>
				 <td headers="co-4" class="optional">188.39</td>
				 <td headers="co-5" class="optional">194.99</td>
				 <td headers="co-6">191.52 x...

CSS

/* Styles for the tables test page */



/* Test page styles */
.docs {
   margin: 3% 5%;
   font-size: 1.2em;
}
.docs h3 {
   font-size: 1.2em;
   font-weight: bold;
   margin: .5em 0;
}
.docs p {
   margin: 0 0 1em;
}


body {
   font: 62.5%/1.3 Helvetica, sans-serif;
}
.a11y-only {
   position: absolute;
   left: -999em;
}

.table-wrapper {
   position: relative;
   margin: 5em 5%;
}
.table-menu-wrapper {
   position: absolute;
   top: -3em;
   right: 0;
}
.table-menu {
   position: absolute;
   background-color: #fff;
   padding: 10px;
   border: 1px solid #ccc;
   font-size: 1.2em;
   width: 12em;
   right: 0;
   left: auto;
}
.table-menu-hidden {
   left: -999em;
   right: auto;
}
.table-menu-btn {
   text-decoration: none;
   color: #333;
   font-size: 1.2em;
   background: #eee url(../_img/icon-menu.png) no-repeat 5px center;
   padding: .3em 10px .3em 20px;
   border: 1px solid #ccc;
}
.table-menu li {
   padding: .3em 0;
}



/* Table styles */
table {
	width: 100%;
	font-size: 1.2em;
}
thead th {
	white-space: nowrap;
	border-bottom: 1px solid #ccc;
	color: #888;
}
th, td {
   padding: .5em 1em;
	background-color: #fff;
	text-align: right;
}
th:first-child, 
td:first-child {
   text-align: left;
}
tbody th, td {
	border-bottom: 1px solid #e6e6e6;
}
.co-name {
   display: block;
   font-size: .9em;
   opacity: .4;
}

.enhanced th,
.enhanced td {
   display: none;
}

.legacy-ie .enhanced th.essential, 
.legacy-ie .enhanced td.essential {
	display: inline;
}
.enhanced th.essential, 
.enhanced td.essential {
   display: table-cell;
}



@media screen and (min-width: 500px) {
	.legacy-ie .enhanced th.optional, 
	.legacy-ie .enhanced td.optional {
		display: inline;
	}
	.enhanced th.optional, 
	.enhanced td.optional {
		display: table-cell;
	}
}

@media screen and (min-width: 800px) {
   .legacy-ie .enhanced th, 
   .legacy-ie .enhanced td {
      display: inline;
   }
   .enhanced th, 
   .enhanced td {
      display: table-cell;
   }
}