JSFiddle - React, Tailwind, and code Playground

by SO_AMK

HTML

<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<div id="div1">test</div>
<script id="template" type="text/x-jsrender">
<div class="page" id="{{:info.id+info.name}}">
    {{for sources}}
    <header class="feed-title">
        <div class="feed-title-content">
            <span class="feed-title-text">{{:title}}</span>
        </div>
    </header>
    <section class="row">
        <div class="scroll-left"></div>
        <div class="row-scroll">
            {{for articles}}
            {{if img === false }}
            <div class="tile no-img">
                <title class="tile-title no-img">{{>title}}</title>
                <hr class="no-img hr" />
                <span class="no-img excerpt">{{>excerpt}}</span>
                <div class="tile-modal">
                    <div class="article-wrapper">
                        <div class="article-header">
                            <a class="article-title-link" target="_blank" href="{{:link}}">
                                <h1 class="article-title">{{>title}}</h1>
                            </a>
                            <h2 class="article-byline">By {{>author}}: <a href="{{:#parent.parent.link}}" class="article-title-link" title="Click to visit {{>#parent.parent.link}}">{{>#parent.parent.title}}</a></h2>
                        </div>
                        <hr class="article-hr" />
                        <div class="article-content">
                            {{:content}}
                            <div class="read-more">
                                <a class="read-more" target="_blank" href="{{:link}}">Read More...</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{/if}}
            {{else}}
            <div class="tile">
                <img class="tile-image" src="{{:img}}" />
                <title class="tile-title">{{>title}}</title>
                <div...

JavaScript

var testTemplate = {
    "info": {
        "id": 0,
        "name": "HOME"
    },
    "sources": [
        {
        "articles": [
            {
            "author": "Whitson Gordon",
            "content": "<div>TEST CONTENT!!!!</div>",
            "img": "http://hr-pulsesubscriber.appspot.com/image?link=http%3A%2F%2Fimg.gawkerassets.com%2Fimg%2F17tb3830lzj9gjpg%2Fmedium.jpg",
            "link": "http://lifehacker.com/5927355/versus-io-compares-tons-of-modern-smartphones-tells-you-which-you-should-buy",
            "snippet": "Stuck between two smartphones and can't decide which to buy? Versus IO will\ncompare them side-by-side, spec-by-spec, and even offer a suggestion on wh...",
            "title": "Versus IO Compares Tons of Modern Smartphones, Tells You Which You Should Buy [Comparisons]"},
        {
            "author": "Daniel Willingham",
            "content": "<div>TEST CONTENT!!!!</div>",
            "img": "http://hr-pulsesubscriber.appspot.com/image?link=http%3A%2F%2Fimg.gawkerassets.com%2Fimg%2F17t8ub9o8z3pvjpg%2Fmedium.jpg",
            "link": "http://lifehacker.com/5927213/at-last-good-news-for-multitaskers",
            "snippet": "_Psychologists have not had anything nice to say about multitasking. Trying to\ndo two things at once degrades performance in virtually all circumstanc...",
            "title": "At Last, Good News for Multitaskers [Multitasking]"},
        {
            "author": "Thorin Klosowski",
            "content": "<div>TEST CONTENT!!!!</div>",
            "img": "http://hr-pulsesubscriber.appspot.com/image?link=http%3A%2F%2Fimg.gawkerassets.com%2Fimg%2F17tax9w7x4afajpg%2Fmedium.jpg",
            "link": "http://lifehacker.com/5927326/soundgecko-converts-any-article-into-an-audible-mp3",
            "snippet": "At its core, SoundGecko is a new webapp that's essentially a text-to-speech\ntranscription service. Drop a URL into SoundGecko and it converts the arti...",
            "title": "SoundGecko Converts Any Article...