JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<table id="datatable" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th data-priority="1">Client Order ID</th>
      <th>Status</th>
      <th data-priority="4">Transaction Time</th>
      <th>Tag 50</th>
      <th>Qty</th>
      <th>Open Qty</th>
      <th>Contract</th>
      <th>Session ID</th>
      <th>B/S</th>
      <th>Account</th>
      <th>Time In Force</th>
      <th data-priority="2">Decimal Price</th>
      <th data-priority="3">Fractional Price</th>
      <th>Stop Price</th>
      <th>Exchange</th>
      <th>Sender Location</th>
    </tr>
  </thead>
  <tbody class="js-orders-collection">
    <tr id="5624837373" role="row" class="table__row--odd">
      <td>YVU8859</td>
      <td class="table__order--status js-hook--order-status">working</td>
      <td class="table__sorting__1">2016-12-19 23:44:23.113</td>
      <td>DUMMY</td>
      <td>10</td>
      <td>10</td>
      <td>OBZ7 P29500</td>
      <td>YVU</td>
      <td>buy</td>
      <td>TEST_ACCOUNT</td>
      <td>day</td>
      <td>10002</td>
      <td>10002</td>
      <td></td>
      <td>NYMEX</td>
      <td>Brio</td>
    </tr>
    <tr id="8029121264" role="row" class="table__row--even">
      <td>YVU8769</td>
      <td class="table__order--status js-hook--order-status">working</td>
      <td class="table__sorting__1">2016-12-19 23:33:38.481</td>
      <td>dummy</td>
      <td>11</td>
      <td>11</td>
      <td>AD9V7</td>
      <td>YVU</td>
      <td>buy</td>
      <td>TEST_ACCOUNT</td>
      <td>day</td>
      <td>1995</td>
      <td>1995</td>
      <td></td>
      <td>NYMEX</td>
      <td>Brio</td>
    </tr>
    <tr id="8029121263" role="row" class="table__row--odd">
      <td>YVU8768</td>
      <td class="table__order--status js-hook--order-status">working</td>
      <td...

SCSS

// Converts pixels to rems based on the pixel input and
// the browser context value (located in _settings.defaults.scss)
$browser-context: 16px;
@function rem($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }
  @if (unitless($context)) {
    $context: $context * 1px;
  }
  @return $pixels / $context * 1rem;
}

$breakpoint: 760px;
$cardHeaderHeight: rem(40);

$z-index: (
  loader: 100,
  alert: 90,
  header: 10,
  slideTwo: 10
);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  @media (min-width: $breakpoint) {
    // padding: rem(16);
  }
}

table {
  td {
    text-transform: capitalize;
  }
}

.card {
  $cardHeaderColor: #585c60;
  $cardFooterColor: #f4f4f4;
  background: white;
  // overflow: hidden;
  height: 100%;
  position: relative;
  transition: width 0.3s;
  @media (min-width: $breakpoint) {
    border: 1px solid #b3b3b3;
    border-bottom: 3px solid rgba(black, 0.4);
    // max-width: rem(320);
    // max-height: rem(320);
    width: 100%;
  }
  &.resize {
    width: 50%;
    margin: 0 auto;
  }
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: $cardHeaderHeight;
    background: $cardHeaderColor;
    color: #cbcecf;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: map-get($z-index, header);
  }
  &__meta {
    display: flex;
    height: 100%;
    align-items: center;
    color: white;
    &__icon {
      background-color: #1b8fe5;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: rem(40);
      font-size: rem(24);
      color: #59b2e8;
    }
  }
  &__heading {
    margin: 0 0 0 rem(8);
    font-weight: normal;
    font-size: rem(19);
    line-height: 1;
  }
  &__body {
    height: 100%;
    &__header {
      background: rgba(#fff, 1);
      border-bottom: 1px solid rgba(black, 0.2);
      position: absolute;
 ...

JavaScript

console.clear();

$(document).ready(function() {
    $('#datatable').DataTable({
      dom: '<lf<"myWrapper"t>ip><"clear">'
    });  
})();