JSFiddle - React, Tailwind, and code Playground

Me Fav Fiddles dataTables Version

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Type</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr class="sticky">
            <td><a href="http://jsfiddle.net/jenniferperrin/3a2d88cg/" target="_blank">MySQLi Field Finder</a></td>
            <td>MySQLi Field Finder LIKE &amp; IN</td>
            <td>MySQL Code</td>
            <td>July 2015</td>
        </tr>
        <tr class="sticky">
            <td><a href="http://jsfiddle.net/jenniferperrin/cfycL3r7/" target="_blank">Bootstrap/Font Awesome Base</a></td>
            <td>Bootstrap v3.3.1 / Font Awesome 4.2.0</td>
            <td>Forkable Base</td>
            <td>October 2014</td>
        </tr>
        <tr class="sticky">
            <td><a href="http://jsfiddle.net/jenniferperrin/zfckspq0/" target="_blank">Font Awesome Base</a></td>
            <td>Font Awesome 4.2.0</td>
            <td>Forkable Base</td>
            <td>December 2014</td>
        </tr>
        <tr class="sticky">
            <td><a href="http://jsfiddle.net/jenniferperrin/2h6u52rt/" target="_blank">Screen Ruler</a></td>
            <td>Screen Ruler Only - No other Resources</td>
            <td>Forkable Base</td>
            <td>Dec. 17 2014</td>
        </tr>
        <tr class="sticky">
            <td><a href="http://jsfiddle.net/jenniferperrin/onrLjj94/" target="_blank">Typical CSS Media Queries</a></td>
   ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
* {
    border-radius: 0 !important;
}
html, body {
    color: #444444;
    font-family:'Open Sans';
    margin: 10px auto 25px;
    width: 98%;
    background: #f0f0f0;
}

table.dataTable thead th, table.dataTable thead td,
table.dataTable tbody th, table.dataTable tbody td {
    padding: 4px 8px;
}
table.dataTable thead th, table.dataTable tfoot th {
    font-weight: 300;
}
table.dataTable tbody tr.sticky { background: #dcdcdc !important; }
table.dataTable tbody tr.sticky td { border-top-color: #ffffff; }

table.dataTable tbody tr a { color: #444444; }
table.dataTable tbody tr a:hover { color: #222222; }

label {
    font-weight: 400;
    margin-bottom: 10px;
}
input, select {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    color: #555;
    height: 25px;
}

JavaScript

$(document).ready(function () {
    $('#example').dataTable({
        "ordering": false,
        "pageLength": 50
    });
});