JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<div class='sfContainer sfTwitter'>
    <img class='sfProfilePic' src='https://api.twitter.com/1/users/profile_image?screen_name=codef0rmer&size=normal'  />
    <div class='sfBody'>
        <div class='sfFavicon'><img src='https://twitter.com/phoenix/favicon.ico'/></div> 
        <div class='sfHandler'>codef0rmer</div>
    </div>
</div>

CSS

.sfContainer {
    width : 207px;
    height : 58px;
    border : 1px solid #CCCCCC;    
    position:absolute;
    z-index : 8;
}
.sfContainer.sfTwitter { 
    background-color : #F9F9F9;   
}
.sfContainer .sfProfilePic {
    padding : 5px 4px 4px 4px;
    z-index : 10;
}
.sfContainer .sfBody {
    position:relative;
    top :-58px;
    left : 2px;
    text-align:right;
    width : 200px;
    font : 13px "Tahoma",Helvetica,Arial,sans-serif;
    font-weight : bold;
    color : #0084B4;
    background-color : transparent;
    z-index : -1;
}
.sfContainer .sfBody .sfFavicon {
    position:relative;
    left : -75px;
    top : 2px;    
}
.sfContainer .sfBody .sfHandler {
    position:relative;
    top : -18px;
}

JavaScript

//social flair project