JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<script src="http://fonts.googleapis.com/css?family=Lobster"></script>
<script src="http://fonts.googleapis.com/css?family=Corben:bold"></script>
<script src="http://www.javascripttoolbox.com/libsource.php/table/source/table.js"></script>
<h1>CRM Database Statistics</h1>
<div class='info'><label>Database:</label><span class='value'>jdbc:db2://psdb01.chq.ei:50000/sbox_ph</span></div>
<div class='info'><label>Update:</label><span class='value'>Sat Apr 21 18:31:48 PDT 2012</span></div>
<h2>Query Index</h2>
<ul>
<li><a href="#Recent Users From History">Recent Users From History</a><li><a href="#Number of Objects Created">Number of Objects Created</a><li><a href="#Number of Objects Modified">Number of Objects Modified</a><li><a href="#Recently Modified Objects by Company">Recently Modified Objects by Company</a></ul>
<h2 id="Recent Users From History">Recent Users From History</h2>
    <table class="table-autosort">
<tr><th class="table-autofilter">Username</th><th>Count</th></tr>
  <tr><td>Kathryn McCafferty</td><td>318</td></tr>
  <tr><td>Touma Hayakawa</td><td>240</td></tr>
  <tr><td>David Barnes</td><td>233</td></tr>
  <tr><td>Eva Eireiner</td><td>213</td></tr>
  <tr><td>Grant Cusack</td><td>207</td></tr>
  <tr><td>Elie Sleem</td><td>192</td></tr>
  <tr><td>Leslie Adlam</td><td>192</td></tr>
  <tr><td>Sarah Pireyre</td><td>189</td></tr>
  <tr><td>Courtney Hickam</td><td>187</td></tr>
  <tr><td>Luke Archdeacon</td><td>185</td></tr>
  <tr><td>Alexandra Hunter</td><td>182</td></tr>
  <tr><td>Derik Davis</td><td>178</td></tr>
  <tr><td>Chris Greenmun</td><td>176</td></tr>
  <tr><td>Teresa Akiyama</td><td>164</td></tr>
  <tr><td>Brad Muller</td><td>155</td></tr>
  <tr><td>Deanna Wilson</td><td>149</td></tr>
  <tr><td>Amanda Rostan</td><td>147</td></tr>
  <tr><td>Cindy Lee</td><td>140</td></tr>
  <tr><td>Dave McComb</td><td>117</td></tr>
  <tr><td>Randy Gould</td><td>94</td></tr>
  <tr><td>Laura Stechmesser</td><td>72</td></tr>
  <tr><td>Don Savino</td><td>66</td></tr>
...

CSS

body {
    background-color: #D8D9D0;            
}

table {
    border-collapse: collapse;
    // border: 1px solid black;
    margin-bottom: 30px;
}

th {
    background-color: #466273;
    color: white;
    line-height: 35px;
}

td, th {
    text-align: left;
    padding: 1px 10px 1px 10px;
    min-width: 100px;
}

td:first-child, th:first-child {
    text-align: left;
}

td:last-child, td:only-child { 
    width: 100%;
}

tr:nth-child(2n) {
    background-color: #7FA7BF;
}

tr:nth-child(2n+1) {
    background-color: #A0C3D9;
}

tr {
 border-top: 1px solid #D8D9D0;
}

tr:hover {
    background-color: #6FBEED;
}

h2 {
    margin: 10px;
    font-family: 'Lobster', Georgia, serif;
    font-size: 18px;
    font-variant: normal;
    color: black;
    letter-spacing: 5px;
}

h1 {
    font-family: 'Lobster', Georgia, serif;
}

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: normal;
  src: local('Lobster'), url('http://themes.googleusercontent.com/static/fonts/lobster/v5/MWVf-Rwh4GLQVBEwbyI61Q.woff') format('woff');
}

@font-face {
  font-family: 'Corben';
  font-style: normal;
  font-weight: bold;
  src: local('Corben'), url('http://themes.googleusercontent.com/static/fonts/corben/v5/ljkAb4w-83fUltRn9aENdT8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
@font-face {
  font-family: 'Corben';
  font-style: normal;
  font-weight: 400;
  src: local('Corben Regular'), local('Corben-Regular'), url('http://themes.googleusercontent.com/static/fonts/corben/v5/aTjzBnce-6l9sMpae8_abg.woff') format('woff');
}