JSFiddle - React, Tailwind, and code Playground

by toddmotto

HTML

<script type="text/template" id="link">
    <a href="{href}">
        {title}
    </a>
</script>

CSS

body {
    padding: 50px;
}
a {
    background: #444;
    color: #fff;
    display: block;
    padding: 10px;
    margin: 0 0 10px;
    text-align: center;
    text-decoration: none;
    font: 300 14px/1.6 'Helvetica Neue', Helvetica, Arial;
}

JavaScript

var linkTemplate = document.querySelector('#link').innerHTML;

var data = [{
    "title": "Google",
    "href": "//google.com"
    },{
    "title": "Yahoo",
    "href": "//yahoo.com"
}];

for (var i = 0; i < data.length; i++) {
    var obj = data[i];
    link = linkTemplate.replace(/^\s+|\s+$/g, '');
    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            var regexp = new RegExp('\{' + key + '\}', 'g');
            link = link.replace(regexp, obj[key]);
        }
    }
    document.body.innerHTML += link;
}