JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">

  <div>1</div>

</div>
<!-- /one -->

<div class="two">

  <div>2</div>
  <div>2</div>

</div>
<!-- /two -->

<div class="three">

  <div>3</div>
  <div>3</div>
  <div>3</div>

</div>
<!-- /three -->

<div class="four">

  <div>4</div>
  <div>4</div>
  <div>4</div>
  <div>4</div>

</div>
<!-- /four -->


<div class="six">

  <div>6</div>
  <div>6</div>
  <div>6</div>
  <div>6</div>
  <div>6</div>
  <div>6</div>

</div>
<!-- /six -->




<div class="twelve">

  <div>12</div>
  <div>12</div>
  <div>12</div>
  <div>12</div>
  <div>12</div>
  <div>12</div>

  <div>12</div>
  <div>12</div>
  <div>12</div>
  <div>12</div>
  <div>12</div>
  <div>12</div>

</div>
<!-- /twelve -->

SCSS

* { margin:0; padding:0; }

body { 
    width: 80%;
    margin: 3em auto;
    background: yellow;
}

@mixin sharedProperties { 
    float: left;
    margin-left: 2%;
        &:first-child { 
        margin-left: 0;
    }
    /* unrelated */
    margin-bottom: 2%;
    text-align: center;
    line-height: 6em;
    height: 6em;
    background: #222;
    color: #999;
}

@mixin gridTwelve { 
    @include sharedProperties; 
    width: 6.5%;
} 

@mixin gridSix { 
    @include sharedProperties; 
    width: 15%;
} 

@mixin gridFour { 
    @include sharedProperties; 
    width: 23.5%;
} 

@mixin gridThree { 
    @include sharedProperties; 
    width: 32%;
} 

@mixin gridTwo { 
    @include sharedProperties; 
    width: 49%;
} 

@mixin gridOne { 
    @include sharedProperties; 
    width: 100%;
    margin-right: 0;
} 


.twelve div { 
    @include gridTwelve;
}

.six div { 
    @include gridSix;
}

.four div { 
    @include gridFour;
}

.three div { 
    @include gridThree;
}

.two div { 
    @include gridTwo;
}

.one div { 
    @include gridOne;
}

JavaScript

// grid via: http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

// github: https://gist.github.com/1708004

// follow: @genelocklin for awesome shit!






















// 2006?!?! what?!?!? https://lists.webkit.org/pipermail/webkit-unassigned/2006-January/002684.html