JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="js-output"></div>

<script type="text/html" id="tmpl">
    <% _.each(statuses, function(status) { %>
        <div class="user">
            <p>User: <%= status.user.name %></p>
            <p>Screen Name: <%= status.user.screen_name %></p>
            <p>Location: <%= status.user.location %></p>
        </div>
    <% }) %>
    
</script>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
    font-family: Roboto;
    color: #191919;
}

a {
    color: #191919;
}

p {
    margin: 4px 0;
}

.user {
    padding: 16px;
    margin: 10px;
    background: #eee;
}

JavaScript

console.clear();

var template = _.template($('#tmpl').html());

$('.js-output').html(template({
    "statuses": [
        {
            "metadata": {
                "result_type": "popular",
                "iso_language_code": "en"
            },
            "created_at": "Wed Nov 04 09:11:24 +0000 2015",
            "id": 661833110036721700,
            "id_str": "661833110036721664",
            "text": "November ...🍕 #November #Pizza https://t.co/sfmAMOS5dB",
            "source": "Twitter for iPhone</a>",
            "truncated": false,
            "in_reply_to_status_id": null,
            "in_reply_to_status_id_str": null,
            "in_reply_to_user_id": null,
            "in_reply_to_user_id_str": null,
            "in_reply_to_screen_name": null,
            "user": {
                "id": 152902472,
                "id_str": "152902472",
                "name": "Yesung",
                "screen_name": "shfly3424",
                "location": "Korea",
                "description": "Super junior Yesung (Instagram) YESUNG1106 (weibo) Yesung110684",
                "url": null,
                "entities": {
                    "description": {
                        "urls": []
                    }
                },
                "protected": false,
                "followers_count": 3398960,
                "friends_count": 47,
                "listed_count": 35199,
                "created_at": "Mon Jun 07 04:50:16 +0000 2010",
                "favourites_count": 556,
                "utc_offset": 32400,
                "time_zone": "Seoul",
                "geo_enabled": false,
                "verified": true,
                "statuses_count": 584,
                "lang": "ko",
                "contributors_enabled": false,
                "is_translator": false,
                "is_translation_enabled": true,
                "profile_background_color": "C0DEED",
                "profile_background_image_url":...