JSFiddle - React, Tailwind, and code Playground

HTML

<header role="banner">
  <a href="#" id="logo">LOGO</a>
  <nav>
    <ul>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>
<div class="wrapper">
<div class="headerBreak">&nbsp;</div>
<section class="clearfix">
  <div class="tableWrapper">
    <table>
      <thead>
        <th></th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
      </thead>
      <tfoot>
        <td></td>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
      </tfoot>
      <tbody>
        <tr>
          <td>------- Long Header 1 --------</td>
          <td><div>1:1</div></td>
          <td><div>1:2</div></td>
          <td><div>1:3</div></td>
          <td><div>1:4</div></td>
          <td><div>1:5</div></td>
          <td><div>1:6</div></td>
          <td><div>1:7</div></td>
          <td><div>1:8</div></td>
        </tr>
        <tr>
          <td>------- Long Header 2 --------</td>
          <td><div>12120</div></td>
          <td><div>2:2</div></td>
          <td><div>2:3</div></td>
          <td><div>2:4</div></td>
          <td><div>2:4</div></td>
          <td><div>2:4</div></td>
          <td><div>2:4</div></td>
          <td><div>2:4</div></td>
        </tr>
        <tr>
          <td>------- Long Header 3 --------</td>
          <td><div>3:1</div></td>
          <td><div>3:1</div></td>
          <td><div>3:1</div></td>
          <td><div>10990</div></td>
          <td><div>3:1</div></td>
          <td><div>3:1</div></td>
          <td><div>3:1</div></td>
          <td><div>3:1</div></td>
      ...

CSS

* {
    border:0;
    margin:0;
    padding:0;
  }
  html,body {
    width:320px;
    max-width:320px;
    /*-webkit-overflow-scrolling:touch;*/
  }
  header {
    background-color:yellow;
    height:50px;
    width:320px;
    position:fixed;
    top:0;
  }
  nav {
    display:none;
  }
  .tableWrapper {
    max-width:300px;
    overflow-x:scroll;
    margin:0 10px;
  }
  table {
    border-collapse:collapse;
    background-color:lightblue;
  }
  td,th {
    border:1px solid black;
    padding:10px;
    white-space:nowrap;
  }
  .headerBreak {
    margin:50px 0 0;
  }
  .wrapper {
    background-color:#f3f3f3;
  }
  footer {
    clear:both;
    width:100%;
    background-color:green;
    margin:100px 0 0;
  }
  .clearfix {
    *zoom: 1;
  }
  .clearfix:before, .clearfix:after {
    display:table;
    content:"";
  }
  .clearfix:after {
    clear:both;
  }

JavaScript

/*
NOTE:
The only thing changed between this version and the original is that I commented out "-webkit-overflow-scrolling"
*/