JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<div class="container-fluid" id="wrapper">
    <div class=row>
        <div class="col-lg-12">
          <div class='post'>Post 1</div>
          <div class='post'>Post 2</div>
          <div class='post'>Post 3</div>
          <div class='post'>Post 4</div>
          <div class='post'>Post 5</div>
          <div class='post'>Post 6</div>        
        </div>
    </div>
    <div class=row>
        <div class="col-lg-12">
          <div class='post'>Post 1</div>
          <div class='post'>Post 2</div>
          <div class='post'>Post 3</div>
          <div class='post'>Post 4</div>
          <div class='post'>Post 5</div>
          <div class='post'>Post 6</div>                
        </div>
    </div>
    <div class=row>
        <div class="col-lg-6">
          <div class='post'>Post 1</div>
          <div class='post'>Post 2</div>
          <div class='post'>Post 3</div>
          <div class='post'>Post 4</div>
          <div class='post'>Post 5</div>
          <div class='post'>Post 6</div>                
        </div>
    </div>
</div>

CSS

#wrapper
{
        margin: 20px;
    padding: 20px;
    width: 450px;
    overflow-x: auto;
    background: #eee;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
}
#wrapper .row .col-lg-12 {
    padding: 20px 0 0;
    display:flex;
}

#wrapper .row .col-lg-1 {
    padding: 20px 0 0;
}

.col-lg-12 .post {
    background: #fff;
    border: 1px solid #e4e4e4;
    margin-left: 20px;
    padding: 40px;
    display:inline-block;
}

.col-lg-6 .post {
    background: #fff;
    border: 1px solid #e4e4e4;
    margin-left: 18px;
    margin-top: 10px;
    padding: 35px;
    display:inline-block;
}