JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="responsive"><div class="responsive-inner"><table><thead><tr><th>Product Price Sheet</th> <th>Sheet Name</th> <th>PDF</th> <th>Excel</th> <th>Effective Date</th> <th>Historical Sheets</th></tr></thead> <tbody><tr><td><strong>FPPI</strong></td> <td>SCI.FPPI-2.21</td> <td>
                                                                                                    --
                                                                                            </td> <td><a href="https://s3.us-east-1.amazonaws.com/anvilintl.com-newprod/price-sheets/excel/SCI.FPPI-2.21-website.xlsx"><i class="fa fa-file-excel-o"></i></a></td> <td>2/1/2021</td> <td><a href="https://anvilintl.imarc.io/price-sheets/fire-sprinkler-products-accessories-1/fppi?country=US">View History</a></td></tr></tbody> <tfoot></tfoot></table></div></div>

SCSS

.responsive {
  width: 320px;
  border: 1rem solid black;
  overflow-x: scroll;
  position: relative;
  
  box-shadow: -1rem 0  2rem red inset;
}

table {
  border: 1px solid;
  background-color: yellow;
}

.responsive-inner {
  padding: 0 2rem;
  display: table;
}