JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<li class='tweet bubble'>
    <div class="info">
        <div class="profile_photo"><img src="https://si0.twimg.com/profile_images/1473970224/Dolenjska_214_normal.JPG"/></div>
        <div class="profile_info">
            <span class="user">Matej Hočevar<img src="https://twitter.com/images/resources/twitter-bird-light-bgs.png" width="30" height="30" /></span>
            <span class="user_name"><a href="https://twitter.com/qwertzr">@qwertzr</a></span>
        </div>
        <div class="follow button">
            <a href="https://twitter.com/qwertzr" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow</a>

        </div>
    </div>
    <div class="text">
        <p>Ok need a break, some fresh air and a hug.\
\
           \ And more water. <a>#raveinthestudio</a></p>
    </div>
    <hr/>
    <div class="other">
        <div class="time">17:42 - 6. maj 2013</div>
        <div class="actions">
            <div class="fav icon"> </div>
            <div class="retweet icon"> </div>
            <div class="replay icon"> </div>
        </div>
    </div>
</li>

CSS

html,*
{
	padding: 0;
	margin: 0;
}

body
{
	background: url(images/bg.png) repeat;	
}
.width_container
{
	width: 80%;
	margin: 0 auto;	
}
h1{ text-align: center; color: #eee; }

#renderTweets
{
	float: left;
	width: 100%;
	word-wrap: break-word;
	line-height: 200px;
}

.tweet
{
    font-family: "Trebuchet MS", Helvetica, sans-serif;
	margin: 20px;
	padding: 10px;
    width: 400px;
    height: auto;
	display: inline;
	overflow: visible;
}
.tweet a, .tweet a:visted,  
{
    text-decoration: none;
    color: #ff9933;
}
.bubble{
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.info
{
    display: block;
}
.profile_photo, .profile_info
{
    display: inline-block;
    padding: 0 5px 0 0;
}
.profile_photo img
{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;  
    border-radius: 5px;
    width: 45px;
    height: 45px;
    overflow: hidden;
}
.profile_info
{
    position: relative;
    top: -10px;
}
.profile_info .user, .profile_info .user_name, .follow
{
    font-size: 0.9em;
    display: block;
}

.profile_info .user
{
    color: #333;
    font-weight: bold;   
}
.profile_info .user img
{
    position: relative;
    top: 10px;
}

.profile_info .user_name a
{
    font-weight: 100;
    color: #777;
    text-decoration: none;
}
.info .follow
{
    float: right;
}
.text
{
    display: block;
    font-weight: 100;
    font-size: 0.9em; 
    color: #333;
}
hr
{
    margin: 5px 0;
    border: 0;
    height: 1px;
    background: #ff9933;
    opacity: 0.6;
}

.icon { float: right; margin: 0 2px; width: 16px; height: 16px; display: inline-block; background-position: 0px 0}
.fav { background-image: url('https://si0.twimg.com/images/dev/cms/intents/icons/sprites/favorite-sprite.png')}
.replay { background-image: url('https://si0.twimg.com/images/dev/cms/intents/icons/sprites/reply-sprite.png')}
.retweet {...

JavaScript

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');