JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div class="container">
<div class="profile-container unfold">
<div class="profile">
<div class="avatar"><img src="http://imapo.ru/wp-content/uploads/2015/03/imapo.png" width="135px" /></div>
<div class="follow"><button><i class="icon-plus"></i> Follow</button></div>
</div>
<ul class="profile-list">
<li class="first"><i class="icon-user"></i> Profile</li>
<li class="second"><i class="icon-list-alt"></i> Activity</li>
<li class="third"><i class="icon-time"></i> Timeline</li>
<li class="fourth"><i class="icon-heart"></i> Favorites</li>
</ul>
</div>
</div>

CSS

@import"//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
    background: #888;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.container {
    margin: 40px auto 0;
    width: 143px;
}
.profile-container {
    position: relative;
    width: 143px;
    float: left;
}
.profile {
    background: #f6f6f6;
    float: left;
    padding: 4px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.avatar img {
    display: block;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.follow {
    margin: 4px 0 0 0;
}
.follow button {
    display: block;
    width: 100%;
    border: 0;
    background: #268cde;
    color: white;
    padding: 7px 0;
    margin: 0;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.follow button i {
    font-size: 10px;
    color: #b9daf4;
}
.follow button:hover {
    background: #3096e8;
}
.follow button:active {
    background: #2085d6;
}
.profile-list {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    color: #767b7e;
    font-size: 13px;
}
.profile-list li {
    cursor: pointer;
    background: #ffffff;
    border-top: 1px solid #e5e6e6;
    padding: 15px 10px;
}
.profile-list li:last-child {
    border-radius: 0...