JSFiddle - React, Tailwind, and code Playground
HTML
<div id="results-container">
<div id="top-contain">
<input type="text" class="round"><button type="button">Go</button>
</div>
<p id="results">No Results</p>
<div id="dvProdList"></div>
</div>
CSS
#results-container
{
background-color:#262626;
width:100%;
min-height:500px
}
#top-contain
{
background-color:#212121;
height:50px;
}
#results
{
font-size:4em;
text-align:center;
color:#fff;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif
}
button
{
background-color:#555555;
color:#bbbbbb;
border:none;
width:80px;
font-size:14px;
padding:6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-left:8px
}
input.round {
border: 2px solid #c58608;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
font-size: 20px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
width:60%;
margin:7px;
}
input.round:focus {
border-color: #1578ff;
}
#dvProdList li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
JavaScript
$( "button" ).click(function() {
if( !$.trim( $('#dvProdList').html() ).length ) {
$("#results").css('display', 'none');
}
var jsonURL = "https://dl.dropboxusercontent.com/u/99591531/product.json";
$.getJSON(jsonURL, function (json)
{
var imgList= "";
$.each(json.books, function () {
imgList += '<li><img src= "' + this.imgPath + '"></li>';
});
$('#dvProdList').append(imgList);
});
});