JSFiddle - React, Tailwind, and code Playground

by Dave Jan

HTML

<div class="container">
    			
			<div class="heroCol column">
			
				<div class="">
					<img class="" src="http://mobileimages.lowes.com/product/converted/883049/883049332109sm.jpg"/>
					<p>Whirlpool 4.5 Cu. Ft. Duet Steam Front Load Washer (Color: Cranberry red) Energy Star</p>
						<ul class="bullets">
							<li>ENERGY STAR Qualified</li>
							<li>NSF Certified Sanitary cycles</li>
							<li>Fan Fresh? option</li>
						</ul>
					<a>Add to Cart</a>
					<p>$ 1599.00</p>
				</div>
				
			</div>
			
			<div class="products load column">
			
				<div class=" grid_4">
					<img class="scale-with-grid" src="http://mobileimages.lowes.com/product/converted/883049/883049332109sm.jpg"/>
					<p>Whirlpool 4.5 Cu. Ft. Duet Steam Front Load Washer (Color: Cranberry red) Energy Star</p>
					<p>$ 1599.00</p>
					<a>View More</a>					
				</div><!-- product -->
				
				<div class=" grid_4">
					<img class="scale-with-grid" src="http://mobileimages.lowes.com/product/converted/883049/883049332109sm.jpg"/>
					<p>Whirlpool 4.5 Cu. Ft. Duet Steam Front Load Washer (Color: Cranberry red) Energy Star</p>
					<p>$ 1599.00</p>
					<a>View More</a>	
				</div><!-- product -->
				
				<div class=" grid_4">
					<img class="scale-with-grid" src="http://mobileimages.lowes.com/product/converted/883049/883049332109sm.jpg"/>
					<p>Whirlpool 4.5 Cu. Ft. Duet Steam Front Load Washer (Color: Cranberry red) Energy Star</p>
					<p>$ 1599.00</p>
					<a>View More</a>
				</div><!-- product -->

			</div>
			
    </div>

CSS

@charset "utf-8";

/* CSS Document */
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}

body {
	line-height:1;
}

ol,ul {
	list-style:none;
}

H1,H2,H3 {
	margin-bottom:35px;
	line-height: 100%;
}

P,li {
	margin-bottom:10px;
}

A {
	background-color: #B7B7B7;
	border: 2px solid #727272;
	color: #328fc2;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 8px 15px;
}

/* Main Styles */
body {
	color:#505050;
	cursor:default;
	font-family:'Helvetica Neue',Helvetica Arial,sans-serif;
	font-size:14px;
	font-weight:200;
	line-height:17px;
	margin:0;
	padding:0;
	text-rendering: auto;
	-moz-user-select:-moz-none;
	-ms-user-select:none;
	-o-user-select:none;
	-webkit-user-select:none;
}

.heroCol {
	margin-top: 20px;
	margin-bottom: 20px;
	width: 992px;
}

.heroCol DIV {
	background-color: #e5e5e5;
	border: 3px solid #BFBFBF;
	padding:10px;
	width: 100%;
}

.products {width: 100%}

.products DIV {
	background-color: #e5e5e5;
	border: 3px solid #BFBFBF;
	text-align: center;
	margin:0 20px 20px 0 !important;
	padding:10px;
}

.products DIV:nth-child(3n+3) {
	margin:0 0 20px 0 !important;	
}
/* Additional Styles */

DIV {
	display:block;
}

.bullets {
	list-style: disc;
	margin-left: 15px;
}

.hinted {
	color: #328fc2;
	text-decoration: underline;
}

.smallFont {
	font-size: 12px;
}

.alignRight {
	text-align:...

JavaScript

var url = 'https://raw.githack.com/gromstone/jsonFiles/master/products.json';
	
	$.ajax({
		type: 'GET',
		dataType: 'json',
		url: url,
		success: function(data){
			console.log(data);
			
			$.each(data, function(i, products){
			
				var content = "<div class=\"item grid_4\">"; 
				
				$.each(products, function(i, mainProd){
				
					var brand = brand.ProductInfo.Brand,
						desc = brand.ProductInfo.p_product_description,
						price = brand.ProductInfo.p_product_price;
					
					//content += '<img class="scale-with-grid" src="' + src + '"/>';
					content += '<p>' + brand + desc + '</p>';
					content += '<p>' + price + '</p>';
					content += '<a>View More</a>';
					
					
				});
				
				content += "</div><!-- product -->";
				$('.load').append(parent);

			})
		},
		
		error: function(){
			alert('Data did not load, or no connection')
		}
		
	});