JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

HTML

<table class="pagination">
    <tr>
        <td class="column1">
            <div class="content">
                <span>left</span>
            </div>
        </td>
        <td class="column2">
            <span>centered</span>
        </td>
        <td class="column3">
            <div class="content">
                <span>right</span>
            </div>
        </td>
    </tr>
</table>

<table class="pagination">
    <tr>
        <td class="column1">
            <div class="content">
                <span>left</span>
                <span>left</span>
            </div>
        </td>
        <td class="column2">
            <span>centered</span>
        </td>
        <td class="column3">
            <div class="content">
                <span>right</span>
                <span>right</span>
            </div>
        </td>
    </tr>
</table>

<table class="pagination">
    <tr>
        <td class="column1">
            <div class="content">
                <span>left</span>
            </div>
        </td>
        <td class="column2">
            <span>centered</span>
        </td>
        <td class="column3">
            <div class="content">
                <span>right</span>
                <span>right</span>
            </div>
        </td>
    </tr>
</table>

<table class="pagination">
    <tr>
        <td class="column1">
            <div class="content">
                <span>left</span>
                <span>left</span>
            </div>
        </td>
        <td class="column2">
            <span>centered</span>
        </td>
        <td class="column3">
            <div class="content">
            </div>
        </td>
    </tr>
</table>

<table class="pagination">
    <tr>
        <td class="column1">
            <div class="content">
            </div>
        </td>
        <td class="column2">
            <span>centered</span>
        </td>
        <td class="column3">
            <div class="content">
            </div>
        </td>
   ...

CSS

.pagination {
    width: 100%;
    margin-bottom: 10px;
    border: 0;
    border-spacing: 0;
}
.pagination td {
    padding: 0;
}
.pagination td.column1 {
    text-align: right;
    background-color: #eee;
}
.pagination td.column2 {
    width: 1px;
    text-align: center;
}
.pagination td.column3 {
    text-align: left;
    background-color: #ccc;
}
.pagination span {
    display: inline-block;
    height: 20px;
    margin: 0 2px;
    padding: 3px 6px;
    background-color: #7ad;
    white-space: nowrap;
}
.pagination td.column2 span {
    background-color: #7da;
}
.pagination .content {
    display: inline-block;
    width: 140px;
}
.pagination td.column1 .content {
    text-align: right;
    background-color: #aaa;
}
.pagination td.column3 .content {
    text-align: left;
    background-color: #888;
}