JSFiddle - React, Tailwind, and code Playground

by Christopher Kim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script type='text/template' id='event'>
    <h2><%= eventName %></h2>
    <h4><%= date %></h4>
        
    <strong><%= location %></strong>
        
    <p><%= description %></p>
 </script>

CSS

h2 {
    font-weight: bold;
    color: blue;
}
h4 {
    font-style: italic;
    color: red;
}

JavaScript

// 1.) need a model
var model = {
    eventName: 'Blackhawks Playoff #7',
    date: 'May 29th, 2015',
    location: 'United Center',
    description: 'Tickets start at $350 and go up.  Come win Lord Stanley\'s Cup Back!'
};

// 2.) need a template
var eventString = $('#event').html();
var eventTemplate = _.template(eventString);

// 3.) render on page
$('body').append(eventTemplate(model));