JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="tabbable">
    <ul class="nav nav-tabs profile-tabs">
        <li class="active"><a href="#recent-activity" data-toggle="tab"><i class="fa fa-cubes fa-fw"></i> <span class="hidden-xs">Activity</span></a>
        </li>
        <li><a href="#likes" data-toggle="tab"><i class="fa fa-thumbs-up fa-fw"></i> <span class="hidden-xs">Likes</span></a>
        </li>
        <li><a href="#nuts" data-toggle="tab"><i class="fa fa-bomb fa-fw"></i> <span class="hidden-xs">nutty</span></a>
        </li>
        <li><a href="#comments" data-toggle="tab"><i class="fa fa-comments fa-fw"></i> <span class="hidden-xs">Comments</span></a>
        </li>
        <li><a href="#babbld" data-toggle="tab"><i class="fa fa-archive fa-fw"></i> <span class="hidden-xs">babbld</span></a>
        </li>
        <!-- <li><a href="#saves" data-toggle="tab"><i class="fa fa-bookmark fa-fw"></i> <span class="hidden-xs">Saves</span></a></li>
                                                <li><a href="#friends" data-toggle="tab"><i class="fa fa-smile-o fa-fw"></i> Friends</a></li>
                                                <li><a href="#groups" data-toggle="tab"><i class="fa fa-group fa-fw"></i> Groups</a></li>
                                                <li><a href="#rank" data-toggle="tab"><i class="fa fa-star"></i> Rank</a></li>
                                                -->
    </ul>
    <div class="tab-content" style="margin-top: 20px;">
        <div class="tab-pane fade in active" id="recent-activity">
            <div class="timeline-centered">
                <article class="timeline-entry">
                    <div class="timeline-entry-inner">
                        <div...

CSS

.setLoadingHeight {
    margin-top: 30%;
}
.profile-tabs > li a {
    color: #999;
}
.timeline-centered {
    position: relative;
    margin-bottom: 30px;
}
.timeline-centered:before, .timeline-centered:after {
    content:" ";
    display: table;
}
.timeline-centered:after {
    clear: both;
}
.timeline-centered:before, .timeline-centered:after {
    content:" ";
    display: table;
}
.timeline-centered:after {
    clear: both;
}
.timeline-centered:before {
    content:'';
    position: absolute;
    display: block;
    width: 4px;
    background: #f5f5f6;
    /*left: 50%;*/
    top: 20px;
    bottom: 20px;
    margin-left: 28px;
}
.timeline-centered .timeline-entry {
    position: relative;
    /*width: 50%;
        float: right;*/
    margin-top: 5px;
    margin-left: 30px;
    margin-bottom: 10px;
    clear: both;
}
.timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after {
    content:" ";
    display: table;
}
.timeline-centered .timeline-entry:after {
    clear: both;
}
.timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after {
    content:" ";
    display: table;
}
.timeline-centered .timeline-entry:after {
    clear: both;
}
.timeline-centered .timeline-entry.begin {
    margin-bottom: 0;
}
.timeline-centered .timeline-entry.left-aligned {
    float: left;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner {
    margin-left: 0;
    margin-right: -18px;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time {
    left: auto;
    right: -100px;
    text-align: left;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon {
    float: right;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label {
    margin-left: 0;
    margin-right: 70px;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after {
    left: auto;
    right: 0;
    margin-left: 0;
   ...