JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
			<table class="inventory">
				<thead>
					<tr>
						<th><span>COL1</span></th>
						<th><span>COL2</span></th>
						<th><span>COL3</span></th>
						<th><span>COL4</span></th>
						<th><span>COL5</span></th>
					</tr>
				</thead>
        <tbody>
          <tr>
            <td><span>Test data 1</span></td>
            <td><span>Test data 1</span></td>
            <td><span>Test data 1</span></td>
            <td><span>Test data 1</span></td>
            <td><span>Test data 1</span></td>
          </tr>
        </tbody>
      </table>
    </div>

CSS

*
{
	border: 0;
	box-sizing: content-box;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	list-style: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	vertical-align: top;
}



/* page */

html { font: 16px/1 'Arial', sans-serif; overflow: auto; padding: 0.5in; }
html { background: #999; cursor: default; }

body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.3in; width: 8.5in; }
body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }

table.inventory { clear: both; border: 0px; line-height: 1.2;width: 100%; padding-left:20px; padding-right:20px;font-size: 85%;}
table.inventory th { font-weight: bold; border: 0px;line-height: 1.2;text-align: left; }

table.inventory td:nth-child(1) { border: 0px;line-height: 1.2;width: 47.5%; }
table.inventory td:nth-child(2) { border: 0px;line-height: 1.2;width: 12.5%; }
table.inventory td:nth-child(3) { border: 0px;line-height: 1.2;text-align: right; width: 15%; }
table.inventory td:nth-child(4) { border: 0px;line-height: 1.2;text-align: right; width: 12.5%; }
table.inventory td:nth-child(5) { border: 0px;line-height: 1.2;text-align: right; width: 12.5%; }