JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css">
<!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">Ratchet</h1>
    </header>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
        <ul class="table-view">
          <li class="table-view-cell">
              <input type="checkbox" /> Check Box
          </li>
          <label><li class="table-view-cell" type='checkbox'>
              <input class='table-view-cell' type="checkbox" /> Check Box
              </li></label>
          <li class="table-view-cell">
              <input type="checkbox" /> Check Box
          </li>
          <li class="table-view-cell">
              <input type="checkbox" /> Check Box
          </li>
        </ul>
    </div>