JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="mosaic">
    <article>
        <div>
            <div>1a</div>
        </div>
        <div>
            <div>1b</div>
        </div>
    </article>
    <article>
        <div>
            <div>2a</div>
        </div>
        <div>
            <div>2b</div>
        </div>
    </article>
    <article>
        <div>
            <div>3a</div>
        </div>
        <div>
            <div>3b</div>
        </div>
    </article>
    <article>
        <div>
            <div>4a</div>
        </div>
        <div>
            <div>4b</div>
        </div>
    </article>
    <article>
        <div>
            <div>5a</div>
        </div>
        <div>
            <div>5b</div>
        </div>
    </article>
    <article>
        <div>
            <div>6a</div>
        </div>
        <div>
            <div>6b</div>
        </div>
    </article>
</div>

SCSS

*{
    box-sizing: border-box;
}
.mosaic{
    &:before{
        content: '';
        zoom: 1;
    }
    &:after{
        content: '';
        display: table;
        clear: both;
    }
    
    & > article:nth-child(6n+1){
        float: left;
        width: 66.666%;
        & > div{
            position: relative;
            float: left;
            width: 50%;
            background-color: #eee;
            &:after{
                content: '';
                display: block;
                padding-top: 100%;
            }
            & > div{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
            &:last-child{
                clear: right;
            }
        }
    }
    
    & > article:nth-child(6n+2){
        float: left;
        width: 66.666%;
        & > div{
            position: relative;
            float: left;
            width: 50%;
            background-color: #eee;
            left: 50%;
            &:after{
                content: '';
                display: block;
                padding-top: 100%;
            }
            & > div{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
            &:last-child{
                left: -50%;
                clear: right;
            }
        }
    }
    
    & > article:nth-child(6n+3){
        float: right;
        width: 33.333%;
        & > div{
            position: relative;
            width: 100%;
            background-color: #eee;
            &:after{
                content: '';
                display: block;
                padding-top: 100%;
            }
            & > div{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
            &:last-child{
                clear:...

JavaScript

/**
 * MOSAIC 2
 */