JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<table class="tablesaw tablesaw-stack" data-mode="stack">
		<thead>
			<tr>
				<th>Skill</th>
				<th>Last Entry</th>
				<th>Alphabet</th>
				<th>More Alphabet</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Bartender</td>
				<td>May 2, 1:34p John K.</td>
				<td>A, B, C, D</td>
				<td>E, F, G, H</td>
			</tr>
			<tr>
				<td>Host</td>
				<td>May 11, 12:45a</td>
				<td>A, B, C, D</td>
				<td>E, F, G, H</td>
			</tr>
		</tbody>
	</table>

CSS

/*! Tablesaw - v0.1.2 - 2014-05-14
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2014 Filament Group; Licensed MIT */

table.tablesaw {
  empty-cells: show;
  max-width: 100%;
  width: 100%;
}

.tablesaw {
  border-collapse: collapse;
  width: 100%;
}

/* Structure */

.tablesaw {
  border: 0;
  padding: 0;
}

.tablesaw th,
.tablesaw td {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .5em .7em;
}

.tablesaw thead tr:first-child th {
  padding-top: .9em;
  padding-bottom: .7em;
}

/* Table rows have a gray bottom stroke by default */

.tablesaw-stack tbody tr {
  border-bottom: 1px solid #dfdfdf;
}

.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
  display: none;
}

/* Mobile first styles: Begin with the stacked presentation at narrow widths */

@media only all {
  /* Show the table cells as a block level element */

  .tablesaw-stack td,
  .tablesaw-stack th {
    text-align: left;
    display: block;
  }

  .tablesaw-stack tr {
    clear: both;
    display: table-row;
  }

  /* Make the label elements a percentage width */

  .tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: block;
    padding: 0 .6em 0 0;
    min-width: 30%;
    display: inline-block;
  }

  /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */

  .tablesaw-stack th .tablesaw-cell-label-top,
  .tablesaw-stack td .tablesaw-cell-label-top {
    display: block;
    padding: .4em 0;
    margin: .4em 0;
  }

  .tablesaw-cell-label {
    display: block;
  }

  /* Avoid double strokes when stacked */

  .tablesaw-stack tbody th.group {
    margin-top: -1px;
  }

  /* Avoid double strokes when stacked */

  .tablesaw-stack th.group b.tablesaw-cell-label {
    display: none !important;
  }
}

@media (max-width: 39.9375em) {
  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
...

JavaScript

console.log($.fn.jquery);
/*! Tablesaw - v0.1.2 - 2014-05-14
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2014 Filament Group; Licensed MIT */
;(function( $ ) {
	var pluginName = "table",
		classes = {
			toolbar: "tablesaw-bar"
		},
		events = {
			create: "tablesawcreate",
			destroy: "tablesawdestroy"
		},
		defaultMode = "stack",
		initSelector = "table[data-mode],table[data-sortable]";

	var Table = function( element ) {
		if( !element ) {
			throw new Error( "Tablesaw requires an element." );
		}

		this.table = element;
		this.$table = $( element );

		this.mode = this.$table.attr( "data-mode" ) || defaultMode;

		this.init();
	};

	Table.prototype.init = function() {
		// assign an id if there is none
		if ( !this.$table.attr( "id" ) ) {
			this.$table.attr( "id", pluginName + "-" + Math.round( Math.random() * 10000 ) );
		}

		this.createToolbar();

		// Add header cells
		var colstart,
			thrs = this.table.querySelectorAll( "thead tr" ),
			self = this;

		$( thrs ).each( function(){
			var coltally = 0;

			$( this ).children().each( function(){
				var span = parseInt( this.getAttribute( "colspan" ), 10 ),
					sel = ":nth-child(" + ( coltally + 1 ) + ")";

				colstart = coltally + 1;

				if( span ){
					for( var k = 0; k < span - 1; k++ ){
						coltally++;
						sel += ", :nth-child(" + ( coltally + 1 ) + ")";
					}
				}

				// Store "cells" data on header as a reference to all cells in the same column as this TH
				this.cells = self.$table.find("tr").not( $( thrs ).eq( 0 ) ).not( this ).children( sel );
				coltally++;

			});
		});

		this.$table.trigger( events.create, [ this.mode, colstart ] );
	};

	Table.prototype.createToolbar = function() {
		// Insert the toolbar
		// TODO move this into a separate component
		var $toolbar = this.$table.prev( '.' + classes.toolbar );
		if( !$toolbar.length ) {
			$toolbar = $( '<div>' )
				.addClass( classes.toolbar )
				.insertBefore( this.$table );
		}
		this.$toolbar =...