JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div><div class="paysage">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div><div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div><div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="paysage">

</div><div class="paysage">

</div><div class="paysage">

</div><div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div><div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="paysage">

</div><div class="paysage">

</div><div class="paysage">

</div>
<div class="paysage">

</div><div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="portait">

</div>
<div class="paysage">

</div>
<div class="paysage">

</div>

CSS

div {
    float: left;
    background: red;
    height: 5em;
    width: 2.5em;
    -moz-box-shadow: inset 0 0 0 0.1em black;
    -webkit-box-shadow: inset 0 0 0 0.1em black;
    
    color: #fff;
}

div.paysage {
    background: blue;
    height: 2.5em;
    width: 5em;
}

JavaScript

var $cache = $("div:eq(0)");

$("div").each(function(i){
    var $that = $(this),
        $next = $that.next();
    
    $that.text(i);
    
    if ( $that.is(".paysage") && $cache.is(".paysage") && $next.is("paysage") ) {
        $that.css("margin-right", "5em");
    }else if( $that.is(".paysage") && $cache.is(".paysage") ){
        $that.css("margin", "2.5em 5em 0 -5em");
    }else if( $that.is(".paysage") ) {
        $that.css("margin", "0 0 2.5em")
    }
    
    $cache = $that;
    
});