JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
        </tr>
        <tr>
          <td>Cell 3</td>
          <td>Cell 4</td>
        </tr>
        <tr>
          <td>Cell 5</td>
          <td>Cell 6</td>
        </tr>
        <tr>
          <td>Cell 7</td>
          <td>Cell 8</td>
        </tr>
        <tr>
          <td>Cell 9</td>
          <td>Cell 10</td>
        </tr>
        <tr>
          <td>Cell 11</td>
          <td>Cell 12</td>
        </tr>
        <tr>
          <td>Cell 13</td>
          <td>Cell 14</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

SCSS

.container {
  padding: 30px;
}

table {
  width: 150% !important;
  /* test width to make table wider */
}

thead, tbody, tr, td, th {
  display: block;
}

tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

thead th {
  height: 50px;
  /* table header height */
}

tbody {
  height: 120px;
  /* table height */
  overflow-y: auto;
}

tbody td, thead th {
  width: 50%; /* column widths */
  float: left;
}

JavaScript

// page slider
$('#page-slider').slick({
  draggable: false,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  speed: 0,
  customPaging: function(slider, i) {
    var page_number = $(slider.$slides[i]).find('.slide').data('page');
    return '<button>.' + page_number + '</button>';
  },
  appendDots: $('.page-dots')

}).on('beforeChange', function(event, slick, currentSlide) {

  // add closed class
  $('#page-slider .slick-slide[data-slick-index="' + currentSlide + '"] .card').addClass('closed');

  setTimeout(function() {
    // delay by four seconds before changing to next slide (not working)
  }, 4000);

}).on('afterChange', function(event, slick, currentSlide) {

  // remove closed class
  $('#page-slider .slick-slide[data-slick-index="' + currentSlide + '"] .card').removeClass('closed');

});

// this sets a height in pixels for each .card
function page_heights() {
  $('#page-slider .card').each(function() {
    var h = $('.card-body', this).outerHeight();
    $(this).css('height', h);
  });
}

// run page heights
page_heights();

// resize functions
$(window).resize(function() {

  // run page heights when resized
  page_heights();

});