JSFiddle - React, Tailwind, and code Playground

by NourSammour

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>XS</th>
        <th>S</th>
        <th>M</th>
        <th>L</th>
        <th>XL</th>
        <th>XXL</th>
        <th>XXXL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-md-1"><input class="form-control" type="number" name="xs" ng-model="order.size.extra_small"></td>
         <td class="col-md-1"><input type="number"  class="form-control" name="s" ng-model="order.size.small"></td>
        <td class="col-md-1"><input  class="form-control"  type="number" name="m" ng-model="order.size.medium"></td>
        <td class="col-md-1"><input  class="form-control"  type="number" name="l" ng-model="order.size.large"></td>
        <td class="col-md-1"><input type="number" name="xl"  class="form-control"  ng-model="order.size.extra_large"></td>
        <td class="col-md-1"><input  class="form-control" type="number" name="xxl" ng-model="order.size.double_extra_large"></td>
        <td class="col-md-1"><input type="number" name="xxxl"  class="form-control"  ng-model="order.size.triple_extra_large"></td>
      </tr>
    </tbody>
  </table>
</div>