JSFiddle - React, Tailwind, and code Playground

by thirdender

HTML

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Direct Deposit</th>
            <th>Form W-9</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>User #0</th>
            <td>
                <span class="label">Direct Deposit:</span>
                <span class="actions">
                    <a href="#">Add form</a>
                </span>
            </td>
            <td>
                <span class="label">Form W-9:</span>
                <span class="actions">
                    <a href="#">Add form</a>
                </span>
            </td>
        </tr>
        <tr>
            <th>User #1</th>
            <td>
                <span class="label">Direct Deposit:</span>
                <span class="actions">
                    <a href="#">Add form</a>
                </span>
            </td>
            <td>
                <span class="label">Form W-9:</span>
                <span class="actions">
                    <a href="#">Add form</a>
                </span>
            </td>
        </tr>
        <tr>
            <th>User #2</th>
            <td>
                <span class="label">Direct Deposit:</span>
                <span class="actions">
                    <a href="#">Add form</a>
                </span>
            </td>
            <td>
                <span class="label">Form W-9:</span>
                <span class="actions">
                    <a href="#">Add form</a>
                </span>
            </td>
        </tr>
        <tr>
            <th>User #3</th>
            <td>
                <span class="label">Direct Deposit:</span>
                <span class="actions">
                    <a href="#">Add form</a>
                </span>
            </td>
            <td>
                <span class="label">Form W-9:</span>
                <span class="actions">
                    <a href="#">Add form</a>
                </span>
            </td>
        </tr>
        <tr>
    ...

SCSS

table {
    td, th {
        padding: .4em 1em;
    }
    th {
        text-align: left;
    }
    span.label {
        display: none;
    }
}

// Display on mobile
table {
    thead {
        display: none;
    }
    span.label {
        display: inline;
    }
    &, tbody, tr, th, td {
        display: block;
    }
    tr {
        float: left;
        width: 50%;
        margin-bottom: 2em;
    }
}