JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container-fluid">
        <!-- 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="#">RGBskills | A community for us Web Developers</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="navbar-right"> <a href="#" class="btn btn-default navbar-btn">Shares</a>
 <a href="#" class="btn btn-default navbar-btn">Arcticles</a>
 <a href="#" class="btn btn-default navbar-btn">Sign in</a>
 <a href="#" class="btn btn-default navbar-btn">Register</a>

            </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="col-md-12">
         <h1>Shares  
             <button class="btn btn-default">All</button>
             <button class="btn btn-default">Your's</button>
             <button class="btn btn-default">You fallow</button>
             
             <button class="btn btn-success pull-right">Post</button></h1>
            <div class="form-group">
                <input type="text" placeholder="Search shares" class="form-control" />
            </div>
        <ul class="list list-shares">
            <li>
                 <h2>Some title</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis atque quae molestias exercitationem hic eligendi animi id...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic, 400italic, 600italic, 700italic, 400, 300, 600, 700);
 body {
    font-family:'Open Sans', sans-serif;
}
.navbar {
    background-color:#fff;
    border-color:#ddd;
}

.btn{
    border:none;
}

h1 {
    font-size:32px;
    font-weight:300;
    color:#111;
    border-bottom:1px solid #ddd;
    padding-bottom:10px;
    margin-bottom:20px;
}
ul.list {
    list-style:none;
    margin:0;
    padding:0;
}
ul.list li{
    border-bottom:1px dotted #ddd;
}
ul.list li:last-child{
    border-bottom:none;
}
ul.list li h2{
    font-size:21px;
    font-weight:300;
}

JavaScript

// shares will be just like the facebook wall only avalible for everione and searchable true tags
// articles will be articles

// Users will add articles share links or "whats on thair mind"
// users can share shares on facebook, comment, like tham
// users can fallow users
// users can see