JSFiddle - React, Tailwind, and code Playground

by Taqi_Shah

HTML

<h2>Word Count</h2>
<table>
    <tr>
        <th>Counts</th>
        <th>Selection</th>
        <th>Document</th>
    </tr>
    <tr>
        <td>Pages</td>
        <td>0</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Words</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Characters (no spaces)</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Characters (with spaces)</td>
        <td>0</td>
        <td>0</td>
    </tr>

CSS

table {
    border-collapse: collapse;
}

td, th {
    padding: 8px 15px;
    text-align: right;
}

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

tr:last-child td {
    border-bottom: none;
}

td:last-child, th:last-child {
    padding-right: 0;
}

th {
    border-bottom: 1px solid #aaa;
}

td {
    border-bottom: 1px solid #ddd;
}