JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<!doctype html>
<html>
      <head>
        <meta charset="utf-8">
        <title>Demo</title>
          <link rel='stylesheet' href='style.css'/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>

    </head>
    <body>
          <h1>Tweet MrJackDavis and it will appear live</h1>
            <div id="twitter">
                <h2>Twitter</h2>
                <input type="button" value="Update" id="tweetUpdate"/>
                <div id="twitterFeed"></div>
            </div>
      </body>
</html>

CSS

body{
        /*background: url(Background.png) no-repeat top right fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;*/
}

/*colour scheme*/
h1,h2,h3,h4,h5,h6{
    color:#A60000;
}

/*typography*/


.shadow{
    text-shadow: 0px 0px 5px #000;
}

#title{
    margin:0px;
    padding:40px;
}
/*TwitterUI*/
#twitter .large{
    background-color:#ccc;
    padding:5%;
    width:90%;
}
.tweet{
    width:80%;
    margin:5px 5%;
    padding:5%;
    background-color:#fff;
    visibility:hidden;
    display:none;
}

/*other*/

JavaScript

$(function(){
                function sizing(){
                    $("body *").addClass("large"); 
                }
                sizing();
            
                
                    var $twitterDiv = $("#twitterFeed");
                    var urlToSearch;
                    var twitterURL = "http://search.twitter.com/search.json?callback=?&";
                    var searchTerm = encodeURIComponent("talk_design");//this is just trending
                    var twitterURL = twitterURL+"q="+searchTerm;
                    var pendingTweets=new Array();
                    var maxTweets = 30;
                        
                    $.ajaxSetup({'beforeSend': function(xhr){
                        if (xhr.overrideMimeType)
                            xhr.overrideMimeType("text/plain");
                        }
                    });
                    function twitter(){
                        $.getJSON(twitterURL,
                            function(data){
                                var pendingTweets=new Array();
                                $.each(data.results, function(index, item){
                                //check that data is new
                                if (item.id != $twitterDiv.find(':first-child:first').attr('rel'))
                                {
                                pendingTweets.push(item)
                                }else{
                                    return false;
                                    //breaks out
                                }
                            });
                            while(pendingTweets.length > 0){
                            var item = pendingTweets[pendingTweets.length-1]
                                $twitterDiv.prepend('<div class="tweet" rel="'+item.id+'">'+
                                '<a href="http://twitter.com/'+item.from_user+'">' +item.from_user+ '</a>' + '<br/>'+item.text+'| Created at: :'+item.created_at+'</div>');
             ...