JSFiddle - React, Tailwind, and code Playground

by revolunet

HTML

<div class="page page1">
    <div><i style="background-image:url('http://lorempixel.com/400/200/sports/1/');"><div class="layer">pouet</div></i></div>
    <div><i style="background-image:url('http://lorempixel.com/400/200/sports/2/')"></i></div>
    <div><i style="background-image:url('http://lorempixel.com/400/200/sports/3/')"></i></div>
    <div><i style="background-image:url('http://lorempixel.com/400/200/sports/4/')"></i></div>
        <div><i style="background-image:url('http://lorempixel.com/400/200/sports/5/')"></i></div>
</div>

SCSS

html, body {
     width:100%;
     height:100%;
}
.page {
    position:relative;
    width:100%;
    height: 100%;
    overflow: hidden;
    
}
.page > div {
    float:left;
    
    display:inline-block;
    padding:1px;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    i {
        background-size: cover;
        background-position:center center;
        border-radius:2px;
        display:block;
        height:100%;
        position:relative;
    }
    div.layer {
        background: rgba(255, 255, 255, 0.5);
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
        padding:5px;
        color:white;
        position:absolute;
        width: 100%;
        bottom: 0;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
    }
}

@mixin pagechild($width:33%) {
    $height:50%;
    width: $width;
    height: $height;
}
.page1 {
    > div {
        &:nth-child(1) {
            @include pagechild($width:34%); 
        }
        &:nth-child(2) {
            @include pagechild($width:66%); 
        } 
        &:nth-child(3) {
            @include pagechild($width:34%); 
        } 
        &:nth-child(4) {
            @include pagechild(); 
        } 
        &:nth-child(5) {
            @include pagechild(); 
        }         
    }
}
.page2 {
    > div {
        &:nth-child(1) {
            @include pagechild($width:34%); 
        }
        &:nth-child(2) {
            @include pagechild(); 
        } 
        &:nth-child(3) {
            @include pagechild(); 
        } 
        &:nth-child(4) {
            @include pagechild($width:67%); 
        } 
        &:nth-child(5) {
            @include pagechild(); 
        } 
    }
}
.page3 {
    > div {
        &:nth-child(1) {
            @include pagechild(); 
        }
        &:nth-child(2) {
            @include pagechild(); 
        } 
        &:nth-child(3) {
            @include pagechild($width:34%); 
        } 
        &:nth-child(4) {
            @include...