JSFiddle - React, Tailwind, and code Playground

by epinapala

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/dynatable-docs-assets/css/jquery.dynatable.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://s3.amazonaws.com/dynatable-docs-assets/js/jquery.dynatable.js"></script>
<table id="example-table" class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Hobby</th>
      <th>Favorite Music</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Scott</td>
      <td>Gaming</td>
      <td>Alternative</td>
    </tr>
    <tr>
      <td>Angie</td>
      <td>Rock Climbing</td>
      <td>80s Rock</td>
    </tr>
    <tr>
      <td>Kevin</td>
      <td>Skiing</td>
      <td>Rock and Roll</td>
    </tr>
    <tr>
      <td>Steve</td>
      <td>Playing Guitar</td>
      <td>Hard Rock</td>
    </tr>
    <tr>
      <td>Shannon</td>
      <td>Baking</td>
      <td>Alternative</td>
    </tr>
    <tr>
      <td>Frank</td>
      <td>Racing</td>
      <td>80s Alternative</td>
    </tr>
    <tr>
      <td>Tammy</td>
      <td>Hanging Out</td>
      <td>Soft Rock</td>
    </tr>
    <tr>
      <td>Christian</td>
      <td>Gaming</td>
      <td>Alternative</td>
    </tr>
    <tr>
      <td>Alison</td>
      <td>Soccer</td>
      <td>Alternative</td>
    </tr>
    <tr>
      <td>Saige</td>
      <td>Gaming</td>
      <td>Rock</td>
    </tr>
    <tr>
      <td>Aaron</td>
      <td>Gaming</td>
      <td>Alternative</td>
    </tr>
    <tr>
      <td>Zain</td>
      <td>Playing with Toys</td>
      <td>Children's Music</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Working Out</td>
      <td>Rock</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Scrapbooking</td>
      <td>Alternative</td>
    </tr>
    <tr>
      <td>Danielle</td>
      <td>Cooking</td>
      <td>Hip Hop</td>
    </tr>
    <tr>
      <td>Ed</td>
      <td>Woodworking</td>
      <td>Popular Music</td>
    </tr>
    <tr>
      <td>Nick</td>
      <td>Business</td>
      <td>Rock</td>
    </tr>
    <tr>
      <td>Mike</td>
     ...

CSS

table {
  max-width: 100%;
}
th {
  text-align: left;
}
.table {
  width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #eaeaea;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f5f5f5;
}

JavaScript

$(document).ready( function() {
    $('#example-table').dynatable({
        // configuration options here
    });
});