JSFiddle - React, Tailwind, and code Playground

by paulslugocki

HTML

<div id="container">
    <h1></h1>
  <p id="price"></p>
  <p id="book"></p>
  <p id="shortdesc"></p>
  <h4></h4>
  <p id="pick"></p>
</div>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
h1 {
 font-size: 1.3em;
 margin-top: 18px;
 font-weight: bold;
} 
h4 {
 font-size: 1.1em;
 margin-top: 18px;
 font-weight: bold;
}    
p {
 font-size: .9em;   
 margin-top: 18px;
}
body {
    font-family: helvetica, sans-serif;
  }
#container {
    padding: 12px;
}
  #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/c/tour/show.json?channel=6&id=167', 
      dataType : "jsonp", 
      success : function(data) { 
       var tour = data.tours[0];
       $('h1').text(tour.tour_name);
       $('#price').html(tour.duration_desc + " from only " + tour.from_price_display);
       $('#book').html("<a href=\"" + tour.book_url +  "\">Book online<a>");
       $('#shortdesc').text(tour.shortdesc);
       $('h4').text("Pick up / drop off");
       $('#pick').html(tour.pick);
     } 
   });
  });