JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vehiclediv">
    <table id="vehicletable">
    <thead>
      <tr id="vehicles">
          <th id="vehicles"></th>
          <th id="vehicles">Bike</th>
          <th id="vehicles">Car</th>
          <th id="vehicles">Truck</th>
      </tr>
      </thead>
      <tbody id="scrolling">
        <tr id="vehicles">
          <td id="vehicles">Fuel Eco.</td>
            <td id="vehicles">&infin;</td>
            <td id="vehicles">25MPG</td>
            <td id="vehicles">16MPG</td>
        </tr>
        <tr id="vehicles">
          <td id="vehicles">Color</td>
            <td id="vehicles">Pink</td>
            <td id="vehicles">Red</td>
            <td id="vehicles">Black</td>
        </tr>
        <tr id="vehicles">
          <td id="vehicles">Cost</td>
            <td id="vehicles">$500</td>
            <td id="vehicles">$18K</td>
            <td id="vehicles">$22K</td>
        </tr>
        <!-- -->
        <tr id="vehicles">
          <td id="vehicles">Cost</td>
            <td id="vehicles">$500</td>
            <td id="vehicles">$18K</td>
            <td id="vehicles">$22K</td>
        </tr>
        <tr id="vehicles">
          <td id="vehicles">Cost</td>
            <td id="vehicles">$500</td>
            <td id="vehicles">$18K</td>
            <td id="vehicles">$22K</td>
        </tr>
        <tr id="vehicles">
          <td id="vehicles">Cost</td>
            <td id="vehicles">$500</td>
            <td id="vehicles">$18K</td>
            <td id="vehicles">$22K</td>
        </tr>
        <tr id="vehicles">
          <td id="vehicles">Cost</td>
            <td id="vehicles">$500</td>
            <td id="vehicles">$18K</td>
            <td id="vehicles">$22K</td>
        </tr>
        <tr id="vehicles">
          <td id="vehicles">Cost</td>
            <td id="vehicles">$500</td>
            <td id="vehicles">$18K</td>
            <td id="vehicles">$22K</td>
        </tr>
        <tr id="vehicles">
          <td id="vehicles">Cost</td>
            <td...

CSS

table#vehicletable {
  color: #333;
  font-family: Helvetica, Arial, sans-serif;
  width: 640px;
  /* Table reset stuff */
  border-collapse: collapse;
  border-spacing: 0;
}
 
tbody#scrolling { height: 120px; overflow-x: hidden; overflow-y:scroll; display: block;}


td#vehicles, th#vehicles {  border: 0 none; height: 30px; min-width:153px; }
thead{
	width:100%;
	display:block;
}


 
     
th#vehicles {
  /* Gradient Background */
  background: linear-gradient(#333 0%,#444 100%);
  color: #FFF; font-weight: bold;
  height: 40px;
}
   
td#vehicles { background: #FAFAFA; text-align: center; }
 
/* Zebra Stripe Rows */
   
tr#vehicles:nth-child(even) td#vehicles { background: #EEE; }
tr#vehicles:nth-child(odd) td#vehicles { background: #FDFDFD; }
 
/* First-child blank cells! */
tr#vehicles td#vehicles:first-child, tr#vehicles th#vehicles:first-child {
  background: none;
  font-style: italic;
  font-weight: bold;
  font-size: 14px;
  text-align: right;
  padding-right: 10px;
  width: 80px;
}
 
/* Add border-radius to specific cells! */
tr#vehicles:first-child th#vehicles:nth-child(2) {
  border-radius: 5px 0 0 0;
}
 
tr#vehicles:first-child th#vehicles:last-child {
  border-radius: 0 5px 0 0;
}