JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<h1>attribute selectors</h1>
<a href="#" class="button button-small">null link</a>

<h1>Table Styling</h1>
<table>
    <caption>Marathon Training Runs</caption>
    <thead>
        <tr>
            <th id="Id">Id</th>
            <th id="Date">Date</th>
            <th id="Distance">Distance</th>
            <th id="Duration">Duration</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="Id">1</td>
            <td headers="Date">2014/12/01</td>
            <td headers="Distance">21km</td>
            <td headers="Duration">01:30:20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2014/12/12</td>
            <td>21km</td>
            <td>01:20:10</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2"></td>
            <td>42km</td>
            <td>02:50:30</td>
        </tr>
    </tfoot>
    <colgroup>
        <col span="2" />
        <col />
    </colgroup>
</table>

<h1>child combinator</h1>
<ul>
    <li>unordered item one</li>
    <li>unordered item two</li>
    <li>
        <ol>
            <li>unordered item #1</li>
            <li>unordered item #2</li>
        </ol>
    </li>
    <li>unordered item three</li>
</ul>

CSS

a[class~=button] {
    color: darkgrey;
    text-transform: uppercase;
}
a[class*=button] {
    display:inline-block;
    background-color: navy;
    padding: 5px;
    text-decoration: none;
    margin-bottom: 1em;
}
table, tr, td, th {
    border-collapse: collapse;
    border: 1px solid red;
}
table > thead > tr > th {
    color: red;
    margin: 0px;
}
table colgroup col:first-child {
    background-color: lightgreen;
}
table colgroup col:nth-child(2) {
    background-color: lightblue;
}
ul > li {
    border: 1px red solid;
    border-collapse: separate;
}