JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <div class="container">
      <!-- Example row of columns -->

     <div class="row">
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>
         <div class="span1"><div class="content"></div></div>

     </div>

    <div class="row">
        <div class="span2"><div class="content"></div></div>
        <div class="span2"><div class="content"></div></div>
        <div class="span2"><div class="content"></div></div>
        <div class="span2"><div class="content"></div></div>
        <div class="span2"><div class="content"></div></div>
        <div class="span2"><div class="content"></div></div>


    </div>


    <div class="row">
        <div class="span3"><div class="content"></div></div>
        <div class="span3"><div class="content"></div></div>
        <div class="span3"><div class="content"></div></div>
        <div class="span3"><div class="content"></div></div>



    </div>

    <div class="row">
        <div class="span4"><div class="content"></div></div>
        <div class="span4"><div class="content"></div></div>
        <div class="span4"><div class="content"></div></div>

    </div>

    <div class="row">
        <div class="span6"><div...

CSS

.content{
    width:100%;    
    height: 60px;
    background-color:black;
}

.row{    
    background-color: orange;    
}

.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12 {
  float: left;
  margin-left: 2%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.span1:first-child,
.span2:first-child,
.span3:first-child,
.span4:first-child,
.span5:first-child,
.span6:first-child,
.span7:first-child,
.span8:first-child,
.span9:first-child,
.span10:first-child,
.span11:first-child,
.span12:first-child {
  margin-left: 0;
}
.span1 {
  width: 6.5%;
}
.span2 {
  width: 15%;
}
.span3 {
  width: 23.5%;
}
.span4 {
  width: 32%;
}
.span5 {
  width: 40.5%;
}
.span6 {
  width: 49%;
}
.span7 {
  width: 57.5%;
}
.span8 {
  width: 66%;
}
.span9 {
  width: 74.5%;
}
.span10 {
  width: 83%;
}
.span11 {
  width: 91.5%;
}
.span12 {
  width: 100%;
}