JSFiddle - React, Tailwind, and code Playground

by paulslugocki

HTML

<h1>Things to do near Aviemore</h1>
<div id="container"></div>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
h2 {
 font-size: 1.1em;
}    
p {
 font-size: .9em;   
 margin-top: 18px;
}
body {
    font-family: helvetica, sans-serif;
  }
#container {
    display: none;  
}
  #container div {  
    clear: right;
    background: #eee;
    margin: 12px;
    padding: 18px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 1px 1px 4px rgba(0,0,0,.2);
  }
  #container div img {
    width: 100px; height: 100px; float: right; margin: 18px;
  }
  .special {
    font-weight: bold; 
  }
  del {
    color: red;
  }
  del span {
    color: #999; 
}

JavaScript

$(function() {
    $.ajax({ 
      url : 'http://www.tourcms.com/scratch/api/json/p/tours/search.json?lat=57.19437&long=-3.828825', 
      dataType : "jsonp", 
      success : function(data) { 
      var tours = data.tours;
      for(var i in data.tours)
      {

        // Build up some HTML about this Tour
        var myHTML = "<div><h2><a href=\"" + tours[i].tour_url_tracked + "\">" + tours[i].tour_name + "</a> (" + Math.round(tours[i].distance) +  " miles)</h2>";
        myHTML += "<img src=\"" + tours[i]. thumbnail_image + "\">";
        myHTML += "<p>" + tours[i].shortdesc + "</p></div>";
        
        // Add the HTML for this Tour to the page
        $("#container").append(myHTML).fadeIn("slow");
      }
     } 
   });
  });