JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<!-- Table basic starts -->
<div class="c-table__wrapper scrollbox">
<div class="scrollbox-bg"></div>
    <table class="c-table">
        <thead class="c-table__header">
            <tr class="c-table__header__row">
                <th class="c-table__header__item">Product</th>
                <th class="c-table__header__item">Quantity</th>
                <th class="c-table__header__item">Condition</th>
                <th class="c-table__header__item">Size</th>
                <th class="c-table__header__item">Grade</th>
            </tr>
        </thead>
        <tbody class="c-table__body">
            <tr class="c-table__body__row">
                <td class="c-table__body__item">Name</td>
                <td class="c-table__body__item">32</td>
                <td class="c-table__body__item">Used Uninspected</td>
                <td class="c-table__body__item">7/8&quot;</td>
              <td class="c-table__body__item">N/A</td>
              
          </tr>
          <tr class="c-table__body__row">
                <td class="c-table__body__item">Name</td>
                <td class="c-table__body__item">14</td>
                <td class="c-table__body__item">Used Uninspected</td>
                <td class="c-table__body__item">7/8&quot;</td>
              <td class="c-table__body__item">N/A</td>
              
          </tr>
          <tr class="c-table__body__row">
                <td class="c-table__body__item">Name</td>
                <td class="c-table__body__item">91</td>
                <td class="c-table__body__item">Used Uninspected</td>
                <td class="c-table__body__item">3/4&quot;</td>
              <td class="c-table__body__item">N/A</td>
              
          </tr>
        </tbody>
    </table>
</div>
<!-- Table basic ends -->

CSS

/**
 * A variation on Scrolling shadows by @kizmarh and @leaverou
 * See http://lea.verou.me/2012/04/background-attachment-local/
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
	background: white;
	font: 100% sans-serif;
}

table {
  border-collapse: collapse;
}

thead {
  background-color: darkgrey;
}

th {
  color: #fff;
}

th, td {
  padding: 8px 32px;
  text-align: left;
}

tr:nth-child(even) {
/* background-color: #ffcc33; */
background-color: rgba(0,0,0,.1);
}


.scrollbox-bg {
  
}
.scrollbox {
	overflow: auto;
	max-width: 400px;
	max-height: 200px;
	margin: 50px auto;

  background-image: 
	
    /* Shadows */ 
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),
  
/* Shadow covers */ 
    linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
    linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));   

  background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
	
	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}