JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="example" aria-describedby="example_info">
        <thead>
		<tr role="row"><th width="20%" class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 132.0028419494629px;" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">Rendering engine</th><th width="25%" class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 172.0028419494629px;" aria-label="Browser: activate to sort column ascending">Browser</th><th width="25%" class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 172.0028419494629px;" aria-label="Platform(s): activate to sort column ascending">Platform(s)</th><th width="15%" class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 92.00284194946289px;" aria-label="Engine version: activate to sort column ascending">Engine version</th><th width="15%" class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 92.00284194946289px;" aria-label="CSS grade: activate to sort column ascending">CSS grade</th></tr>
	</thead>
<tbody>
    </tbody>
</table>

JavaScript

var data = [
    {
      "engine": "Trident",
      "browser": "Internet Explorer 4.0",
      "platform": "Win 95+",
      "version": "4",
      "grade": "X"
    },
    {
      "engine": "Trident",
      "browser": "Internet Explorer 5.0",
      "platform": "Win 95+",
      "version": "5",
      "grade": "C"
    },
    {
      "engine": "Trident",
      "browser": "Internet Explorer 5.5",
      "platform": "Win 95+",
      "version": "5.5",
      "grade": "A"
    },
    {
      "engine": "Trident",
      "browser": "Internet Explorer 6",
      "platform": "Win 98+",
      "version": "6",
      "grade": "A"
    },
    {
      "engine": "Trident",
      "browser": "Internet Explorer 7",
      "platform": "Win XP SP2+",
      "version": "7",
      "grade": "A"
    },
    {
      "engine": "Trident",
      "browser": "AOL browser (AOL desktop)",
      "platform": "Win XP",
      "version": "6",
      "grade": "A"
    },
    {
      "engine": "Gecko",
      "browser": "Firefox 1.0",
      "platform": "Win 98+ / OSX.2+",
      "version": "1.7",
      "grade": "A"
    },
    {
      "engine": "Gecko",
      "browser": "Firefox 1.5",
      "platform": "Win 98+ / OSX.2+",
      "version": "1.8",
      "grade": "A"
    },
    {
      "engine": "Gecko",
      "browser": "Firefox 2.0",
      "platform": "Win 98+ / OSX.2+",
      "version": "1.8",
      "grade": "A"
    },
    {
      "engine": "Gecko",
      "browser": "Firefox 3.0",
      "platform": "Win 2k+ / OSX.3+",
      "version": "1.9",
      "grade": "A"
    },
    {
      "engine": "Gecko",
      "browser": "Camino 1.0",
      "platform": "OSX.2+",
      "version": "1.8",
      "grade": "A"
    },
    {
      "engine": "Gecko",
      "browser": "Camino 1.5",
      "platform": "OSX.3+",
      "version": "1.8",
      "grade": "A"
    },
    {
      "engine": "Gecko",
      "browser": "Netscape 7.2",
      "platform": "Win 95+ / Mac OS 8.6-9.2",
      "version": "1.7",
      "grade": "A"
    },
    {
      "engine":...