JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<img src="http://www.pureflex.com/images/logo.png"alt=""/>
	<h2 style=" text-align:center;">Order Number: 1020</h2>
	<div style="text-align:center;">Order Date: 09/26/2013 03:14 PM</div>
<hr/>
	
	<div style="width:250px;background:red;display:inline-block;padding:5px;">
		<span>Shipping Address</span>
		<div >
			<span>Victor Fuentes</span>
			<span>Victor Enterprises</span>
			<span>4855 Broadmoor Ave SE Ste #404</span>
						<span>Kentwood, MI 49512</span>
		</div>	
	</div>
	
	<div style="width:250px;background:red;display:inline-block;padding:5px;">
		<span>Billing Address</span>
		<div>
			<span>Victor Fuentes</span>
			<span>Victor Enterprises</span>
			<span>4855 Broadmoor Ave SE Ste #404</span>
						<span>Kentwood, MI 49512</span>
		</div>
		<div></div>
	</div>
	
	
	<div>
			<div style="margin-top:10px;margin-bottom:5px;">
				<span style="width:125px;display:inline-block;background:green;text-align:center">Description</span>
				<span style="width:125px;display:inline-block;background:green;text-align:center">Quantity</span>
				<span style="width:125px;display:inline-block;background:green;text-align:center">Per Item</span>
				<span style="width:125px;display:inline-block;background:green;text-align:center">Item Total</span>
			</div>
			<ul style="list-style-type:none;text-indent:0;padding:0;margin:0;">
				<li><span style="width:125px;display:inline-block;background:green;text-align:center">TASK-LINE ® Gaskets - 1-1/4" 150#</span><span>1</span><span>12.11</span><span>12.11</span></li><li><span>TASK-LINE ® Gaskets - 1" 150#</span><span>1</span><span>9.93</span><span>9.93</span></li><li><span>TASK-LINE ® Gaskets - 2" 150#</span><span>1</span><span>13.48</span><span>13.48</span></li><li><span>TASK-LINE ® Gaskets - 4" 150#</span><span>2</span><span>23.21</span><span>46.42</span></li><li><span>TASK-LINE ® Gaskets - 12" 150#</span><span>1</span><span>82.26</span><span>82.26</span></li><li><span>TASK-LINE ® Gaskets - 3/4"...