JSFiddle - React, Tailwind, and code Playground

by justjohn

HTML

<div id="loader">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

SCSS

* {
    box-sizing: border-box; 
}

body {
    background: #222;
}

#loader {
    $boxPadding: 4px;

    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 50px;
    background: #111;
    padding: $boxPadding;
    
    box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.2);
    
    .box {
        display: block;
        float: left;
        width: 50%;
        height: 50%;
        padding: $boxPadding;
        
        &:before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    
    .box:nth-child(4n + 1):before {
        background: #116C9D;
    }
    .box:nth-child(4n + 2):before {
        background: #86150B;
    }
    .box:nth-child(4n + 3):before {
        background: #366836;
    }
    .box:nth-child(4n):before {
        background: #7B458E;
    }
}