JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<head>
    <title>Flying Tweets — Shiny Demos</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="styles/screen.css">
    <link rel="stylesheet" href="/styles/panel.css">
</head>
<body>
    <div id="container">
        <header>
            <form id="frm_search">
                <input type="text" id="txt_search">
                <button type="submit" id="btn_search">Get tweets</button>
            </form>
            <img src="images/resize.svg" alt="Resize icon" id="btn_resize" role="button" title="Resize">
            <!-- Icon source: http://iconmonstr.com/resize-5-icon/ -->
        </header>
        <div id="content" class="animate">
            <div id="tweet"></div>
        </div>
    </div>
    <script src="/scripts/modernizr.js"></script>
    <script src="/scripts/panel.js"></script>
    <script src="scripts/options.js"></script>
    <script src="scripts/script.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
    'use strict';
    
    /*
     * Configuration
     */
    var query = '#css3'; // The initial search term
    var updateTime = 2; // The time between updates in minutes
    
    /*
     * Main script
     */
    // Set some global variables
    var container = document.getElementById('container');
    var content = document.getElementById('content');
    var frm_search = document.getElementById('frm_search');
    var txt_search = document.getElementById('txt_search');
    var btn_search = document.getElementById('btn_search');
    var btn_resize = document.getElementById('btn_resize');
    var tweet = document.getElementById('tweet');
    var count = 0;
    var tweets = [];
    var img = document.createElement('img');
    
    // Add span element and classes to each letter
    function doCharify(tweetData) {
        var text = tweetData.text;
        var user = tweetData.user;
        var result = '';
        for (var i = 0, lenText =...

CSS

* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html {
    height: 100%;
}
body {
    font-family:georgia, 'Times New Roman', times, serif;
    height:100%;
}
a {
    color:#33c;
    text-decoration:none;
}

#container {
    background:#fcc;
    display:table;
    height:100%;
    width:100%;
    -webkit-animation: container 60s linear infinite;
    -moz-animation: container 60s linear infinite;
    -o-animation: container 60s linear infinite;
    animation: container 60s linear infinite;
}
@-webkit-keyframes container {
    25% {
        background:#ffc;
    }
    50% {
        background:#cfc;
    }
    75% {
        background:#ccf;
    }
    100% {
        background:#fcc;
    }
}
@-moz-keyframes container {
    25% {
        background:#ffc;
    }
    50% {
        background:#cfc;
    }
    75% {
        background:#ccf;
    }
    100% {
        background:#fcc;
    }
}
@-o-keyframes container {
    25% {
        background:#ffc;
    }
    50% {
        background:#cfc;
    }
    75% {
        background:#ccf;
    }
    100% {
        background:#fcc;
    }
}
@keyframes container {
    25% {
        background:#ffc;
    }
    50% {
        background:#cfc;
    }
    75% {
        background:#ccf;
    }
    100% {
        background:#fcc;
    }
}

header {
    text-align:right;
}
#frm_search {
    display:inline;
}
#btn_search {
    margin-right:0.5em;
}
#txt_search, #btn_search {
    margin-top:0.5em;
    opacity:0.5;
    padding:0.5em;
    -webkit-transition-duration:0.3s;
    -moz-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    transition-duration:0.3s;
    -webkit-transition-property:opacity;
    -moz-transition-property:opacity;
    -o-transition-property:opacity;
    transition-property:opacity;
}
#txt_search:focus, #txt_search:hover, #btn_search:focus, #btn_search:hover, #btn_resize:focus, #btn_resize:hover {
    opacity:1;
}
#btn_resize {
   ...