JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<script src="http://tweet.seaofclouds.com/jquery.tweet.js" charset="utf-8"></script>
<div class="tweet"></div>

CSS

.tweet,
.query {
    font: 120% Georgia, serif;
    color: #085258;
}

    .tweet_list {
        -webkit-border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow-y: hidden;
        background-color: #8ADEE2;
    }
    
        .tweet_list li {
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0.5em;
            list-style-type: none;
        }
        
            .tweet_list li a {
                color: #0C717A;
            }
        
        .tweet_list .tweet_even {
            background-color: #91E5E7;
        }
        
        .tweet_list .tweet_avatar {
            padding-right: .5em; float: left;
        }
        
            .tweet_list .tweet_avatar img {
                vertical-align: middle;
            }

JavaScript

var template = "{time}<br>{text}<br>{avatar}<br>{name}";
$(".tweet").tweet({
avatar_size: 32,
count: 4,
username: "seaofclouds",
template: template
});