JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Community</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#activity" role="tab" data-toggle="tab">Activity</a>

                </li>
                <li><a href="#media" role="tab" data-toggle="tab">Media</a>

                </li>
                <li><a href="#events" role="tab" data-toggle="tab">Events</a>

                </li>
                <li><a href="#articles" role="tab" data-toggle="tab">Articles</a>

                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href=""><span class="glyphicon glyphicon-heart"></span></a>

                </li>
                <li><a href=""><span class="glyphicon glyphicon-comment"></span></a>

                </li>
                <li><a href=""><span class="glyphicon glyphicon-globe"></span></a>

                </li>
                <li class="menu-user-profile"><a href="#"><span class="glyphicon glyphicon-user"></span> Some Name</a>

                </li>
                <li><a href="" class="btn-logout"><span class="glyphicon...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 body {
    background-color:#F1F1F1;
    padding-top:70px;
    font-family:'Open Sans', sans-serif;
}
.navbar {
    background-color:#fff;
}
.navbar .btn-logout {
    color:#FF4136!important;
}
.navbar .menu-user-profile {
    border-left:1px solid #f4f4f4;
}
.page-header {
    background-color:#fff;
}
.page-header h1 {
    margin-top: 5px;
    margin-bottom: 5px;
}
.list-container .well {
    border-radius:0;
    border-top:none;
    background-color:#fff;
}
.status-post textarea {
    margin-bottom:10px;
}
ul.status-post-addons{
    margin:0;
    padding:0;
    list-style:none;
}
ul.status-post-addons li{
    display:inline-block;
}
.well.status-post .status-post-header{
    padding-bottom:20px;
    border-bottom:1px solid #aaa;
    margin-bottom:20px;
}

.well.status-post .status-post-header .status-post-header-left{
    float:left;
}
.well.status-post .status-post-header .status-post-header-right{
    float:left;
    margin-left:10px;
}

.well.status-post .status-post-header h2{
    font-size:16px;
    margin-top:5px;
    margin-bottom:5px;
}
.well.status-post .status-post-header h3{
    font-size:14px;
    margin-top:0;
    margin-bottom:0;
}
.well.status-post .staus-post-content{
    font-size:14px;
}
.status-post-comments{
    margin:0 -20px -20px -20px;
    background-color:#aaa;
    padding:20px;
}

JavaScript

/*
    Status - Whats on your mind 
    Photos
    Videos
    friends - request
    events - invite feature
    articles - categories, tags
    Likes will matter, sort via likes
*/