JSFiddle - React, Tailwind, and code Playground

HTML

<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?has_offer=1&order=offer_soonest', 
      dataType : "jsonp", 
      success : function(data) { 
      var tours = data.tours;
      for(var i in data.tours)
      {
        var tour = tours[i];
        
        // Build up some HTML about this Tour
        var myHTML = "<div><h2><a href=\"" + tour.tour_url_tracked + "\">" + tour.tour_name + "</a></h2>";
        myHTML += "<img src=\"" + tour.thumbnail_image + "\">";
        myHTML += "<p>" + tour.shortdesc + "</p>";
          
        // Get offer details
        var offer = tour.soonest_special_offer;
        
        wasPrice = offer.original_price_1_display;
        offerPrice = offer.price_1_display;
        
        
        // Generate offer HTML
        myHTML += "<p class=\"special\">Special offer (";
        myHTML += offer.start_date + ") ";
        // Was
        myHTML += "<del><span>" + wasPrice + "</span></del> ";
        // Now
        myHTML += offerPrice + "</p>";
        myHTML += "</div>";
        
        // Add the HTML for this Tour to the page
        $("#container").append(myHTML).fadeIn("slow");
      }
     } 
   });
  });