JSFiddle - React, Tailwind, and code Playground

by vaff

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <dl id='jquery'>
            
        </dl>
        
        <dl id='dojo'>
        </dl>
        
        <dl id="python">
        </dl>
        
        <dl id="php">
        </dl>
        
    </body>
</html>

CSS

body { 
    width: 800px;
    height: 600px;
}

dl {
    width: 190px;
    margin: 5px;
    padding: 0;
    float: left;
    font: Helvetica;
    font-size: 16px;
}

dl:hover dd {
    height: 100px;
    display: block;
    color: #444;
}

dt, dd {
    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;     
}

dt {
    height: 25px;
    background: #444;
    color: #fff;
    text-align: center;
    padding-top: 5px;
    -moz-border-top-left-radius: 5px; /* FF1+ */
    -webkit-border-top-left-radius: 5px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-top-left-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    -moz-border-top-right-radius: 5px; /* FF1+ */
    -webkit-border-top-right-radius: 5px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-top-right-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */     
}

dd {
    height: 5px;
    background: #bbb;
    margin-bottom: 10px;
    color: #000;
    padding: 10px;
    font-size: 12px;    
    line-height: 18px;
    word-wrap: break-word;
    overflow: hidden;
    color: #bbb;  
    -moz-border-radius: 5px; /* FF1+ */
    -webkit-border-radius: 5px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */       
}

dd.first {
    -moz-border-radius: 0px; /* FF1+ */
    -webkit-border-radius: 0px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 0px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
        
    -moz-border-bottom-left-radius: 5px; /* FF1+ */
    -webkit-border-bottom-left-radius: 5px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-bottom-left-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    -moz-border-bottom-right-radius: 5px; /* FF1+ */
    -webkit-border-bottom-right-radius: 5px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-bottom-right-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */ ...

JavaScript

(function($) {
    $.fn.tweets = function(options) {
        $.ajaxSetup({
            cache: true
        });
        var defaults = {
            tweets: 5,
            before: "<dd>",
            before_first: "<dd class='first'>",            
            after: "</dd>",
            before_topic: "<dt>",
            after_topic: "</dt>"
        };
        var options = $.extend(defaults, options);
        return this.each(function() {
            var obj = $(this),
                topic = this.id,
                first = true;
            $.getJSON('http://search.twitter.com/search.json?callback=?&lang=en&rpp=' + options.tweets + '&q=' + topic, function(data) {
                $(obj).append(options.before_topic + topic + options.after_topic);
                $.each(data.results, function(i, tweet) {
                    if (tweet.text !== undefined) {                
                        if(first) {
                            $(obj).append(options.before_first + tweet.text + options.after);
                            first = false;
                        } else {
                            $(obj).append(options.before + tweet.text + options.after);
                        }
                    }
                });
            });
        });
    };
})(jQuery);

$('#jquery').tweets();
$('#dojo').tweets();
$('#python').tweets();
$('#php').tweets();