JSFiddle - React, Tailwind, and code Playground

HTML

<div id="responsive-table">
    <table class="body-copy" style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
        <thead>
            <tr>
                <th>Item #</th>
                <th>Description</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>#####1</td>
                <td>Item Description goes here I</td>
                <td>1</td>
                <td>$9.49</td>
                <td>$9.49</td>
            </tr>
            <tr>
                <td>#####2</td>
                <td>Item Description goes here II</td>
                <td>2</td>
                <td>$9.99</td>
                <td>$19.98</td>
            </tr>
            <tr>
                <td>#####3</td>
                <td>Item Description goes here III</td>
                <td>4</td>
                <td>$3.79</td>
                <td>$15.16</td>
            </tr>
            <tr>
                <td>#####4</td>
                <td>Item Description goes here IV</td>
                <td>1</td>
                <td>$17.94</td>
                <td>$17.94</td>
            </tr>
            <tr>
                <td>#####5</td>
                <td>Item Description goes here V</td>
                <td>3</td>
                <td>$4.99</td>
                <td>$14.97</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

@media screen and (max-width: 480px) {
    /* Force table to not be like tables anymore */
    #responsive-table table, thead, tbody, th, td, tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    #responsive-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    #responsive-table tr {
        border: 1px solid #ccc;
        margin-bottom: 25px;
    }
    #responsive-table td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 42% !important;
    }
    #responsive-table td:before {
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
    }
    #responsive-table td:nth-of-type(1):before {
        content:"Item #";
    }
    #responsive-table td:nth-of-type(2):before {
        content:"Description";
    }
    #responsive-table td:nth-of-type(3):before {
        content:"Quantity";
    }
    #responsive-table td:nth-of-type(4):before {
        content:"Price";
    }
    #responsive-table td:nth-of-type(5):before {
        content:"Total";
    }
}

#responsive-table{margin:0 0 20px 0;}
#responsive-table table{width:100%;border-collapse:collapse;}
#responsive-table th{background:#43904B;font-weight:bold;color:#FFFFFF;}
#responsive-table td,th{padding:7px 16px;text-align:left;border:0;border-style:solid;border-bottom:thin solid #E6E6E6;}