JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <h1>Nested Responsive Grid Demo</h1>
        
        <div class="row">
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div>
        </div>
        
        <div class="row">
            <div class="span2">2</div>
            <div class="span2">2</div>
            <div class="span2">2</div>
            <div class="span2">2</div>
            <div class="span2">2</div>
            <div class="span2">2</div>
        </div>
        
        <div class="row">
            <div class="span3">3</div>
            <div class="span3">3</div>
            <div class="span3">3</div>
            <div class="span3">3</div>
        </div>
        
        <div class="row">
            <div class="span4">4</div>
            <div class="span4">4</div>
            <div class="span4">4</div>
        </div>
        
        <div class="row">
            <div class="span5">5</div>
            <div class="span7">7</div>
        </div>
        
        <div class="row">
            <div class="span6">6</div>
            <div class="span6">6</div>
        </div>
        
        <div class="row">
            <div class="span7">7</div>
            <div class="span5">5</div>
        </div>
        
        <div class="row">
            <div class="span8">8</div>
            <div class="span4">4</div>
        </div>
        
        <div class="row">
            <div class="span9">9</div>
            <div class="span3">3</div>
        </div>
        
        <div class="row">
            <div class="span10">10</div>
            <div class="span2">2</div>
...

SCSS

$cols: 12;
$gutter: 2%;


$one_col: (100% - ($gutter * ($cols - 1))) / $cols;

@mixin cols($num) {
    width: ($one_col * $num) + ($gutter * ($num - 1));
}

@mixin sub_cols($num_child, $num_parent) {
    $parent_size: ($one_col * $num_parent) + ($gutter * ($num_parent - 1));
    $child_size: ($one_col * $num_child) + ($gutter * ($num_child - 1));
    margin-left: ($gutter / $parent_size) * 100%;
    width: ($child_size / $parent_size) * 100%;
}

/*
Pulled this from the compass source, but if you are using compass,
no need to include it 
*/
@mixin enumerate(prefix, from, through, separator = nil) {
    separator ||= Sass::Script::String.new("-", :string)
    selectors = (from.value..through.value).map{|i| "#{prefix.value}#{separator.value}#{i}"}.join(", ")
    Sass::Script::String.new(selectors)
}

/* @group grid */
.row {
    #{enumerate('.span', 1, $cols, '')} {
        float: left;
        margin-left: $gutter;
    }

    @for $i from 1 through $cols {
        .span#{$i} {
            @include cols($i);
            
            @for $j from 1 through ($i - 1) {
                .span#{$j} {
                    @include sub_cols($j, $i);
                }
            }
        }
    }
    
    > :first-child,
    .row > :first-child {
        margin-left: 0;
    }
}

.row:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.lte7 .row {
    height: 1%;
}

.wrapper {
    margin: 0 auto;
    max-width: 1000px;
}
/* @end */


// Below is just for the demo


@import "compass/css3";

/* @group basic reset */
html,
body {
    font: 12px/20px Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.wrapper {
    font-size: 12px;
    line-height: 20px;
}

h1 {
    font-size: 30px;
    line-height: 36px;
}
/* @end */

/* @group extra styling for grid demo */
.row {
    background: #dedede;
    margin-bottom: 20px;
}
.row > [class*="span"] {
    background: #ccc;
    min-height: 80px;
    text-align: center;
   ...