JSFiddle - React, Tailwind, and code Playground

by appleBud

HTML

<div id="data">
   
</div>

CSS

#data
{
    width:500px;
    height: 500px;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px #888888;
}

#a1
{
     width: 210px;
    height:150px;
    padding-left: 22px ;
    margin-left: 10px;
    margin-right: 5px;
    margin-top:10px;
    
    box-shadow: 2px 2px 2px 2px #888888;
    
    float:left;
}

JavaScript

$(document).ready(function(){
    alert("All set to read Json data");
   
    var result={ "name": "Manuals", "subname": "Manuals", "totalresults": 15, 
                "manuals" : [{
						"title": "iPad and iPad mini User Guide (For iOS 7 Software)",

			"pages": "",

			"languages": "true",

			"description": "To view the guide on iPad, tap the iPad User Guide bookmark in Safari or go to <a href=\"http://help.apple.com/ipad\">help.apple.com/ipad</a>.",

			"thumbnail": "/kb/image.jsp?productid=PL220",

			"id": "MA1595",

			"productname": "PL220",

			"parent": "PF22",

			"filesize": "21 MB",

			"lastmodified": "Sep 18, 2013",

			"prodName": "iPad",

			"url": "http://manuals.info.apple.com/en_US/ipad_user_guide.pdf"
        },
        {
						"title": "iPad and iPad mini User Guide (For iOS 6.1 Software)",

			"pages": "",

			"languages": "",

			"description": "To view the guide on iPad, tap the iPad User Guide bookmark in Safari or go to <a href=\"http://help.apple.com/ipad\">help.apple.com/ipad</a>.",

			"thumbnail": "/kb/image.jsp?productid=PL220",

			"id": "MA1659",

			"productname": "PL220",

			"parent": "PF22",

			"filesize": "13 MB",

			"lastmodified": "Jan 28, 2013",

			"prodName": "iPad",

			"url": "http://manuals.info.apple.com/en_US/ipad_ios6_user_guide.pdf"},
         {"title": "iPad (4th generation) and iPad mini Info - safety, warranty, and regulatory information",

			"pages": "",

			"languages": "true",

			"description": "",

			"thumbnail": "/kb/image.jsp?productid=133846",

			"id": "MA1633",

			"productname": "133846",

			"parent": "PL220",

			"filesize": "373 KB",

			"lastmodified": "Nov 1, 2012",

			"prodName": "iPad (4th generation)",

			"url": "http://manuals.info.apple.com/en_US/ipad_4th-gen_ipad-mini_info.pdf"}
                            
          ] 
       };
    
    alert("about to print data");
    var size= result.manuals.length;
    for(var i=0; i<size; i++)
    {
        //alert("Title for zeroth manual...