JSFiddle - React, Tailwind, and code Playground

by Rian

HTML

<html>

<header>
<style>

/* unimportant styles here */
@import url(http://fonts.googleapis.com/css?family=Unica+One);
    body {
      background-color: #ffffff;

      background-size: 50px 50px;; background-color: #fff;
      background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(255,255,255,.3) 50%);
      background-size: 50px 50px;
	        vertical-align: middle;

    }
    h1 {
      font-family: 'Unica One', cursive;
      text-align: center;
      text-shadow: 2px 2px 2px rgba(255, 255, 255, .8);
      margin-top: 40px;
    }
    a, a:hover, a:visited {
      color: #fff;
      display: block;
      text-align: center;
      text-shadow: 1px 1px 2px rgba(0,0,0,.8)
    }
    .container-fluid {
      max-width: 750px;
      margin: 20px auto;
      border: 20px solid #efefef;
      padding: 0;
      background-color: #fff;
      box-shadow: 2px 3px 5px rgba(0,0,0,.5);
	        vertical-align: middle;

    }

    /* important styles below */
    table {
      width: 100%;
    }
    .table-wrapper {
      overflow: hidden;
      border-right: 1px solid #ccc;
	        vertical-align: middle;


    }
    .pinned {
      width: 30%;
      border-right: 1px solid #ccc;
      float: left;
    }
    .scrollable {
      float: right;
      width: 100%;
      overflow: scroll;
      overflow-y: hidden;
	        vertical-align: middle;

    }
    th {
      text-transform: uppercase;
      line-height: 12px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
    }
    td {
      text-align: center;
      vertical-align: middle;
      overflow: hidden;
      height: 30px;
      white-space: nowrap;
    }
    .pinned td {
      position: relative;
      font-weight: bold;
      line-height: 18px;
      text-align: left;
      overflow: hidden;
    }
    .pinned td.wrap {
      white-space: normal;
    }
    td .outer {
      position: relative;
      height: 30px;
    }
    td .inner {
      overflow: hidden;
      white-space:...