JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div class="sg-container">
    <div class="sg-row">
        <div class="sg-12">sg-12</div>
    </div>
    <div class="sg-row">
        <div class="sg-6">sg-6</div>
        <div class="sg-6">sg-6</div>
    </div>
    <div class="sg-row">
        <div class="sg-4">sg-4</div>
        <div class="sg-4">sg-4</div>
        <div class="sg-4">sg-4</div>
    </div>
    <div class="sg-row">
        <div class="sg-3">sg-3</div>
        <div class="sg-3">sg-3</div>
        <div class="sg-3">sg-3</div>
        <div class="sg-3">sg-3</div>
    </div>
</div>

CSS

html, body{
    margin: 0;
    padding: 0;
}
.sg-container{
    width: 100%;
    margin: 0 auto;
}
.sg-container:after{
    display: block;
    content: '';
    clear: both;
}
.sg-row{clear: both; width: 100%;}
.sg-row .sg-3, .sg-row .sg-4, .sg-row .sg-6, .sg-row .sg-12{
    display: block;
    position: relative;
    height: 100%;
    float: left;
    padding: 10px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.sg-row .sg-12{width: 100%;}
.sg-row .sg-6{width: 50%;}
.sg-row .sg-4{width: 33.33%;}
.sg-row .sg-3{width: 25%;}