JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<div id="twitter-feed"></div>

CSS

#twitter-feed {
  font: 12px Arial;
}
#twitter-feed {
  background: url('../img/twitter.jpg') 0 12px no-repeat;
  padding: 10px 0;
  border-top: 6px solid #58a618;
  color: #777;
  width: 190px;
  line-height: 14px;
  height: 100px;
  position: relative;
}
#twitter-feed .tweet {
  padding-left: 40px;
  position: absolute;
  display: none;
}
#twitter-feed .tweet:first-child {
  display: block;
}
#twitter-feed a {
  font-weight: bold;
  color: #777;
  text-decoration: none;
}

JavaScript

/**
    @author(s): Dennis Martinez

    This following file contains a starting point for the websites js file.
*/
;(function(w, d, undefined) {

    'use strict';

    var twitterFeedUrl = 'https://api.twitter.com/1/statuses/user_timeline.json?suppress_response_codes&include_entities=true&include_rts=true&screen_name=enlistonline&count=10&callback=?';

    $(function() {

        var twitterFeed = $('#twitter-feed');

        $.ajax({
            type: 'get',
            url: twitterFeedUrl,
            dataType: 'jsonp',
            success: success,
            error: error
        });

        function success(e) {
            if (e.error) {
                error();
                return;
            }

            var i = 0,
                l = e.length,
                items = [];

            if (l > 0) {
                twitterFeed.html('');
            }

            for (; i < l; i++) {
                items.push('<div class="tweet">' + findHandle(linkify(e[i].text)) + '</div>');
            }

            twitterFeed.append(items.join(''));

            var tweets = $('.tweet'),
                tweetsLength = tweets.length,
                tweetIndex = 0,
                delay = 5000,
                timer = setInterval(rotate, delay);

            function rotate() {
                $(tweets[tweetIndex]).fadeOut(function() {
                    clearInterval(timer);
                });

                if (tweetIndex === tweetsLength - 1) {
                    tweetIndex = 0;
                } else {
                    tweetIndex++;
                }

                $(tweets[tweetIndex]).fadeIn(function() {
                    timer = setInterval(rotate, delay);
                });
            }
        }

        function error() {
            twitterFeed.html('<div class="tweet">The rate limit for the twitter feed has exceeded.</div>');
        }

        function findHandle(text) {
            return text.replace(/(@)(\w+)/g, "<a...