JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<div class="red">Lorem ipsum</div>
<div class="green">Lorem ipsum</div>
<div class="blue">Lorem ipsum</div>
<div class="yellow">Lorem ipsum</div>
<div class="violet">Lorem ipsum</div>

CSS

body {
    padding:50px;
}

div {
    border:1px solid black;
    padding:5px 10px;
    margin:0 0 2px;
}

JavaScript

$('div').each(function(index) {
    var color = this.className; // or: $(this).attr('class');
    $(this).css({
        'background-color':color,
        'margin-right':(index*20)+'px' // Set ukuran margin bertingkat
    });
    $(this).text(index); // Menyisipkan nomor urut (dimulai dari 0)
});