JSFiddle - React, Tailwind, and code Playground

HTML

<div id="twitter">

    <h1><a href="http://twitter.com/motyar">@motyar</a></h1>

     <ul id="twitter_update_list"></ul>



</div>

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>

<script src="http://twitter.com/statuses/user_timeline/motyar.json?callback=twitterCallback2&count=12" type="text/javascript"></script>

CSS

body{
    background:pink;
    
}
#twitter h1 a {

        display: block; margin: 0 0 15px 0;

        font: 90px Helvetica, Arial, Sans-Serif; color: rgba(255,255,255,0.2);

        text-decoration: none;

    }

        #twitter h1 a:hover { color: rgba(255,255,255,0.3); }



    #twitter ul {

        list-style: none; padding: 0 0 0 140px;

    }

        #twitter ul li {

            padding: 20px;

            background: rgba(255,255,255,0.1);

            border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;

        }

        #twitter ul li:hover {

            padding: 20px;

            background: rgba(255,255,255,0.2);

            border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;

        }

            #twitter ul li a {

                font: italic 14px/30px Georgia, Times, Serif;

                color: #555b6e;

            }

                #twitter ul li a:hover { color: #1b2f6f; }



        #twitter ul li span {

            font: 22px/30px Helvetica, Arial, Sans-Serif; color: #fff;

        }

            #twitter ul li span a {

                font: 22px/30px Helvetica, Arial, Sans-Serif;

            }