JSFiddle - React, Tailwind, and code Playground

by Christopher Kim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script type='text/template' id='blog'>
    <h2><%= title %></h2>
    <h4>by <%= createdBy %></h4>
        <p><%= content %></p>
        <p id='comment'>Comments: <%= comment %></p>
</script>

CSS

h2 {
    font-weight: bold;
    color: black;
}
h4 {
    color: red;
}

#comment {
    font-size: 12px;
    font-style: italic;
}

JavaScript

// 1.) need a model
var model = {
    title: 'The Matrix',
    createdBy: 'Chris Kim',
    content: 'I\'m trying to free your mind, Neo. But I can only show you the door. You\'re the one that has to walk through it.',
    comment: 'Big ups man...your blog was DEEP'
};

// 2.) need a template -> created in html script
var a = $('#blog').html(); //eventString as a jQuery object
var b = _.template(a); // eventTemplate - use underscore to pass the template in

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