JSFiddle - React, Tailwind, and code Playground

Tweet Bubble

by Jennifer Perrin

HTML

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:light,regular,bold' rel='stylesheet' type='text/css'>

<div id="container">
    <div class="ticker">
        <ul class="tweet_list"></ul>
    </div>
</div>

CSS

body { 
    margin: 20px; 
    font-family: 'Yanone Kaffeesatz'; 
    background-image: url("http://jenniferperrin.com/img/body-bg.jpg");
    color: #444;
}
#container {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px 8px 8px 8px;
    margin: 40px auto 20px;
    min-height: 60px;
    padding: 20px 0 20px 30px;
    width: 95%;
}

.ticker {
    background: rgba(255, 255, 255, 0.2) url(http://jenniferperrin.com/img/twitter.png) 10px no-repeat;
    border-bottom: 1px #d8d4d1 solid;
    border-radius: 5px;
    height: 20px;
    padding: 10px;
    position: absolute;
    width: 670px;
}
    .ticker:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: #d8d4d1 transparent transparent transparent;
        top: 40px;
        left: 30px;
        margin-left: -10px;
    }

.ticker p { margin: 0; }
    .ticker ul.tweet_list {
      height:20px;
      overflow-y:hidden;
      font-size: 16px;
      margin-left: 35px;
    }
    .ticker .tweet_list li { height:30px; }
    .ticker a { color: #8A98B6; text-decoration:none; }
    .ticker a:hover {
        border-bottom: 1px dotted #8A98B6;
        text-decoration:none;
        color:#bf4c24;
    }
        .ticker .small { font-size: 12px; color:#bbb; }
        .ticker .link { font-size: 14px; }

JavaScript

(function(factory) {
    if (typeof define === 'function' && define.amd) define(['jquery'], factory);
    else factory(jQuery);
}(function($) {
    $.fn.tweet = function(o) {
        var s = $.extend({
            username: null,
            list: null,
            favorites: false,
            query: null,
            avatar_size: null,
            count: 5,
            fetch: null,
            page: 1,
            retweets: true,
            intro_text: null,
            outro_text: null,
            join_text: "&nbsp;",
            // [string] optional text in between date and tweet, try setting to "auto"
            auto_join_text_default: "I said,",
            auto_join_text_ed: "I",
            auto_join_text_ing: "I am",
            auto_join_text_reply: "I replied to",
            auto_join_text_url: "I was looking at",
            loading_text: null,
            refresh_interval: null,
            twitter_url: "twitter.com",
            twitter_api_url: "api.twitter.com",
            twitter_search_url: "search.twitter.com",
            template: "{text}{join}{time}",
            //{avatar}{time}{join}{text}
            comparator: function(tweet1, tweet2) {
                return tweet2["tweet_time"] - tweet1["tweet_time"];
            },
            filter: function(tweet) {
                return true;
            }
        }, o);
        var url_regexp = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/gi;

        function t(template, info) {
            if (typeof template === "string") {
                var result = template;
                for (var key in info) {
                    var val = info[key];
                    result = result.split('{' + key + '}').join(val === null ? '' : val);
                }
                return result;
            } else return template(info);
        }
        $.extend({
    ...