JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
    <tr>
        <th></th>
        <th>Dabblet</th>
        <th>JSFiddle</th>
        <th>Codepen</th>
        <th>CSSDeck</th>
    </tr>
</thead>
    <tr>
        <th>Live reload</th>
        <td class='v'>Yes</td>
        <td class='x'>No</td>
        <td class='v'>Yes</td>
        <td class='v'>Yes</td>
    </tr>
    <tr>
        <th>JS support</th>
        <td class='v'>Yes</td>
        <td class='v'>Yes</td>
        <td class='v'>Yes</td>
        <td class='v'>Yes</td>
    </tr>
    <tr>
        <th>HTML preprocessor</th>
        <td class='x'>No</td>
        <td class='x'>No</td>
        <td class='v'>Markdown, Slim, HAML</td>
        <td class='v'>Markdown, Slim, HAML, Jade</td>
    </tr>
    <tr>
        <th>CSS preprocessor</th>
        <td class='x'>No</td>
        <td class='o'>SCSS</td>
        <td class='v'>Sass, SCSS, Compass, LESS</td>
        <td class='v'>Sass, SCSS, Compass, LESS, Stylus</td>
    </tr>
        <tr>
        <th>JS preprocessor</th>
        <td class='x'>No</td>
        <td class='v'>CoffeeScript, JavaScript 1.7</td>
        <td class='v'>CoffeeScript</td>
        <td class='v'>CoffeeScript</td>
    </tr>
          <tr>
        <th>CSS libraries</th>
        <td class='o'>Prefixfree</td>
        <td class='o'>Normalize</td>
        <td class='v'>Prefixfree, Normalize, Reset</td>
        <td class='v'>Prefixfree, Normalize</td>
    </tr>
      <tr>
        <th>JS libraries</th>
        <td class='x'>No</td>
        <td class='v'>22 (+versions) + JSLint</td>
        <td class='v'>8 + JSLint</td>
        <td class='v'>10</td>
    </tr>
     <tr>
        <th>External resources embedding</th>
        <td class='x'>No</td>
        <td class='v'>Easy</td>
        <td class='v'>Easy</td>
        <td class='o'>Manual</td>
    </tr>
    <tr>
        <th>Shortcuts</th>
        <td class='v'>Yes</td>
        <td class='v'>Yes</td>
        <td class='v'>Yes</td>
        <td class='v'>Yes</td>
    </tr>
    <tr>
       ...

CSS

@import url(http://fonts.googleapis.com/css?family=Ropa+Sans);
@import url(http://fonts.googleapis.com/css?family=Average+Sans);

body {
    padding: 20px; 
}

table {
    width: 100%;
    background: white;
    font-family: 'Average Sans', sans-serif;
    font-size: 16px;
    color: #444;
}

tr {
    -webkit-transition: all 0.2s ease-in-out;
    border-bottom: 1px solid rgba(200,200,200,0.1);
}


tr th:first-of-type {
    text-align: right;
}

th, td {
    text-align: center;
    padding: 10px;
    border: 1px solid rgba(100,100,100,0.1);
}

tr:hover {
    background: rgba(200,200,200,.1);
}

th:empty {
    border: none;
    background: white;
}

th {
    font-weight: bold;
    font-family: 'Ropa Sans', sans-serif;
    background: rgba(200,200,200,0.1);

}

.x {
    background: rgba(255,0,0,0.075);
}

.v {
    background: rgba(0,255,0,0.075);
}

.o {
    background: rgba(255,255,0,0.1);
}