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: absolute;
		padding-left: 42% !important;
		word-wrap: normal !important;
	}
	#responsive-table td:before {
		position: absolute;
		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;}