JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<aside>
    <script id="sidebar-template" type="text/x-jquery-tmpl">
        <section>
            <header>${name}</header>
            <section>
                {{each links}}
                <a href="${link}" class="${icon}">${name}</a>
                {{/each}}
            </section>
        </section>
    </script>
</aside>

CSS

aside > section a {
       display: block;
        margin-left: 1em;
}

JavaScript

document.createElement("aside");
document.createElement("section");
document.createElement("header");

var data = {
    'name': 'Search Engines',
    'links': [
        {'name': 'Google', 'link': 'http://google.com', 'icon':'google'},
        {'name': 'Yahoo', 'link': 'http://yahoo.com', 'icon':'yahoo'},
        {'name': 'Bing', 'link': 'http://bing.com', 'icon':'bing'}
        ]
}
var $list = $('#sidebar-template').tmpl(data).appendTo('aside');