JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<h2>Before text</h2>
<p>Nam at tortor in tellus interdum sagittis. Duis leo. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Aenean viverra rhoncus pede. Suspendisse eu ligula.</p>
<p>Ut tincidunt tincidunt erat. In ac felis quis tortor malesuada pretium. Quisque ut nisi. Nullam sagittis. Maecenas malesuada.</p>
<p>Pellentesque commodo eros a enim. Integer tincidunt. Quisque rutrum. Morbi vestibulum volutpat enim. Morbi mollis tellus ac sapien.</p>

<div data-brix="" data-buffer="15">
    <div>
        <p>Pellentesque dapibus hendrerit tortor. Curabitur turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Phasellus tempus.</p>
    </div>
    <div>
        <h3>Inner title</h3>
        <p>Integer tincidunt. Cras id dui. Fusce commodo aliquam arcu.</p>
        <p>Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Cras ultricies mi eu turpis hendrerit fringilla. Quisque rutrum.</p>
    </div>
    <div>
        <p>Etiam iaculis nunc ac metus. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    </div>
    <div>
        <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Etiam imperdiet imperdiet orci. Fusce commodo aliquam arcu. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit.</p>
    </div>
    <div>
        <p>Aliquam eu nunc. Morbi ac felis.</p>
    </div>
    <div>
        <p>Aenean viverra rhoncus pede. Aenean ut eros et nisl sagittis vestibulum. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Nullam accumsan lorem in dui. Vestibulum volutpat pretium libero.</p>
    </div>
    <div>
        <p>Phasellus a est. Curabitur suscipit suscipit tellus. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi.</p>
    </div>
    <div>
        <p>Donec id justo. Nullam accumsan lorem in dui. Aliquam lorem ante, dapibus in, viverra quis, feugiat...

SCSS

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Merriweather:400,300,700);

html{
    margin: 0;
    padding: 0;
}
body{
    position: relative;
    padding: 0;
    margin: 25px;
    font-family: 'Merriweather', serif;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}
p{
    margin: 0 0 15px 0;
    line-height: 1.6;
    &:last-child{
        margin-bottom: 0;
    }
}
h1, h2, h3, h4, h5, h6{
    margin: 0 0 15px;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
}

[data-brix] p{
    font-family: 'Lato', sans-serif;
    color: #666;
}

[data-brix]{
    padding: 0;
    
    &:before{
        font-size: 0px;
        content: '1';
        visibility: hidden;
        position: absolute;
        top: -9999px;
        left: -9999px;
        opacity: 0;
    }
        
    & > div{
        padding: 15px;
        background-color: rgba(200, 200, 200, 0.3);
        border: 1px dashed #ddd;
        border-top: 1px dashed #ddd;
        margin-bottom: 15px;
    }
    &.brix-init{
        position: relative;
        overflow: hidden;
        transition: height 300ms;
        & > div{
            position: absolute;
            opacity: 0;
            transition: opacity 300ms;
            margin: 0;
            &.brix-init{
                transition: opacity 300ms, top 300ms, left 300ms;
                opacity: 1;
            }
        }
    }

}

@media screen and (min-width: 480px){
    [data-brix]:before{
        content: '2';
    }
}
@media screen and (min-width: 800px){
    [data-brix]:before{
        content: '3';
    }
}
@media screen and (min-width: 1024px){
    [data-brix]:before{
        content: '4';
    }
}

*{
    box-sizing: border-box;
}

.clearfix{
    clear: both;
    
    &:before{
        content: '';
        zoom: 1;
    }
        
    &:after{
        content: '';
        display: table;
        clear: both;
    }
        
}

JavaScript

/**
 * Brix
 */

var brix = {
    debounceDelay: 100,
    init: function () {
        this.bindEvents();
        this.checkPos();
    },
    bindEvents: function () {
        this.run = null;
        window.addEventListener("resize", brix.debounceCheck);
    },
    debounceCheck: function() {
        clearTimeout(brix.run);
        brix.run = setTimeout(function(){
            brix.checkPos();
        }, brix.debounceDelay);
    },
    checkPos: function () {
        var elems = document.querySelectorAll("[data-brix]");
        for (var i = 0; i < elems.length; i++) {
            var wrap = elems[i];
            var cols = Math.max(0, (window.getComputedStyle(wrap, ':before').getPropertyValue('content') || document.defaultView.getComputedStyle(wrap, ':before').getPropertyValue('content')).replace(/^('|")(.*)\1$/i, '$2')),
                wrapX = wrap.offsetWidth,
                buffer = wrap.getAttribute("data-buffer");
            if (buffer) {
                buffer = parseInt(buffer);
            } else {
                buffer = 15;
            }
            if (!cols) {
                cols = 1;
            }
            var colWidth = ((wrapX - (buffer * (cols - 1))) / cols);
            if (!wrap.className.match(/brix\-init/i)) {
                wrap.className = (wrap.className + " brix-init").trim();
            }
            brix.updatePos({
                elem: wrap,
                cols: cols,
                colX: colWidth,
                buffer: buffer
            });
        }
    },
    updatePos: function (obj) {
        var yTrack = {};
        for (var i = 1; i < obj.cols + 1; i++) {
            yTrack[i] = 0;
        }
        elems = obj.elem.querySelectorAll("div");
        for (var i = 0; i < elems.length; i++) {
            var e = elems[i];
            e.style.width = obj.colX + 'px';
            var assignCol = 1,
                storeY = yTrack[assignCol];
            for (var n = 1; n < obj.cols + 1; n++) {
                if...