JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<!-- data-setup= "[item-class-name,blocks-in-row,row-height]" -->
<!-- data-scheme="[left,top,width,height,(optional: .className)]" -->
<div class="js-bricks" data-setup="" data-scheme="[0,0,100,100],[110,0,100,100],[0,110,210,100,long-title]">
    <div class="item">0</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
</div>

JavaScript

var $init = $('.js-bricks');

if ($init.length) {
    $init.css({'position':'relative'});
    var configSetup  = $init.data('setup');
    var configScheme = $init.data('scheme');
    
    alert(configSetup);
}