JSFiddle - React, Tailwind, and code Playground

by fezec

HTML

<div id="social-feed">
    <div class="social-article">
        <div class="profile-pic"><a target="_blank" href="https://twitter.com/Glinner"><img width="42" height="42" alt="twitter icon" src="https://pbs.twimg.com/profile_images/1765325468/profile_copy_normal.jpg"/></a></div>
        <div class="social-text"> <span class="socialprofilelink"><strong><a target="_blank" href="https://twitter.com/Glinner">Graham Linehan</a></strong> <a target="_blank" href="https://twitter.com/Glinner">@Glinner</a></span><span class="created-time"><a target="_blank" href="https://twitter.com/Glinner/status/396942919967731712">Created 14/14</a></span>        <p>this is wher th ebody goes</p>

        </div>
        <a href="#" target="_blank"><img class="media" src="http://www.rachelsimmons.com/wp-content/uploads/2013/02/instagram.jpg"/></a>
                    <div id="retweet-indicator"></div>
            <div id="twitter-actions" style="display: none; opacity: 0; margin-top: -20px;">
                <div id="intent-reply" class="intent"><a title="Reply" href="https://twitter.com/intent/tweet?in_reply_to=[insert_id_here]"></a></div>
                <div id="intent-retweet" class="intent"><a title="Retweet" href="https://twitter.com/intent/retweet?tweet_id=[insert_id_here]"></a></div>
                <div id="intent-fave" class="intent"><a title="Favourite" href="https://twitter.com/intent/favorite?tweet_id=[insert_id_here]"></a></div>
            </div>
    </div>
</div>

CSS

body {
    background-color:#333;
    font-family:Arial, Helvetica, sans-serif;
}
img {
    border:none;
}
.media {
    width:100%;
    height:auto;
    margin:10px 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
#loading-container {
    padding:16px 0px 16px 0px;
    text-align:center;
}
#social-feed {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width:400px;
    width:100%;
    font-family: Arial, Helvetica, sans-serif;
    margin-top:60px;
    padding:8px 10px 5px 10px;
    border-radius:12px;
    background-color:#FFF;
    color:#333;
    overflow:auto;
}
.social-article, #loading-container {
    width:100%;
    border-top:1px dotted #CCC;
    float:left;
    padding:8px 0px 8px 0px;
    position:relative;
}
.profile-pic {
    position:absolute;
}
.profile-pic img {
    float:left;
    border:none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.social-text {
    width:100%;
    float:left;
    font-size:11px;
    padding-left:52px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.social-text p {
    margin:0px;
    min-height:1em;
    line-height:15px;
}
.social-text a, h1 a {
    color: #00acee;
    text-decoration: none;
}
.social-text a:hover, h1 a:hover {
    text-decoration: underline;
    color: #00acee;
}
.created-time {
    font-size:10px;
    color:#878787;
    clear:both;
    display:block;
    margin:0 0 5px 0;
}
.created-time a, .created-time a:hover {
    color:#878787;
}
.socialprofilelink a {
    color:#444;
}
.socialprofilelink a:hover {
    color:#444;
}
/* -------- FEED  ACTIONS ------*/
 #twitter-actions {
    width:75px;
    float:right;
    margin-right:5px;
    margin-top:3px;
    display:none;
}
.intent {
    width:25px;
    height:16px;
    float:left;
}
.intent a {
    width:25px;
    height:16px;
    display:block;
   ...