JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<div class="content">
    <div class="content-1"></div>
    <div class="content-2"></div>
    <div class="content-3"></div>
    <div class="content-3"></div>
    <div class="content-1"></div>
    <div class="content-1"></div>
    <div class="content-2"></div>
    <div class="content-2"></div>
    <div class="content-1"></div>
</div>

SCSS

.content-1 {
    height: 5em;
    background-color: #96CB8E;
}

.content-2 {
    height: 3em;
    background-color: #ACAFC7;    
}

.content-3 {
    height: 6em;
    background-color: #D399A2;
}

.content {
    width: 450px;
}

.content {
    -webkit-box-sizing: border-box;   
    -moz-box-sizing: border-box;  
    box-sizing: border-box; 
    margin: .1em
}

CoffeeScript

options = {
    line: 3
    minWidth: 200
    breakpoint: -> @minWidth * @line
}

breakpoint = [
    200
    400
    600
]

$targets = $("body .content")

$cnts =  $("div:nth-child(3n+1)", $targets)
$clone =  $($cnts, $targets).clone().get()
$cnts2 =  $("div:nth-child(3n+2)", $targets)
$clone2 =  $($cnts2, $targets).clone().get()
$cnts3 =  $("div:nth-child(3n+3)", $targets)
$clone3 =  $($cnts3, $targets).clone().get()
$cnts.remove()
$cnts2.remove()
$cnts3.remove()

ofP = "float": "left", "width": 100 / 3 + "%"

$("<p></p>").append($clone).appendTo($("body")).css ofP
$("<p></p>").append($clone2).appendTo($("body")).css ofP
$("<p></p>").append($clone3).appendTo($("body")).css ofP

$("p > div").css "margin", "0.1em"