JSFiddle - React, Tailwind, and code Playground

by alemarch

HTML

<div class="portaFoto" id="pf0"></div>
<div class="portaFoto" id="pf1"></div>
<div class="portaFoto" id="pf2"></div>
<div class="portaFoto" id="pf3"></div>
<div class="portaFoto" id="pf4"></div>
<div class="portaFoto" id="pf5"></div>
<div class="portaFoto" id="pf6"></div>
<div class="portaFoto" id="pf7"></div>

CSS

.portaFoto {
    border: solid 1px blue;
    position: absolute;
}
.portaFoto:after {
    content: "foto " attr(id);
}

JavaScript

var w = 300;
var h = w*10/15;

var ml0 = 100
var mt0 = 50

var ml1 = 100
var mt2 = 50

var ml2 = 10
var ml3 = ml1 + 2 * (ml0-ml2)

var x,y;

$(".portaFoto").css({width: w + "px", height: h +"px"})

$(".portaFoto").each(function(){
    var r = Math.round(Math.random()*256)
    var g = Math.round(Math.random()*256)
    var b = Math.round(Math.random()*256)
    $(this).css("background-color", "rgb("+r+","+g+","+b+")")
})

x = ml0;
y = mt0;
$("#pf0").css({left:x + "px", top: y +"px"});

x = ml0 + w + ml1;
y = mt0;
$("#pf1").css({left:x + "px", top: y +"px"});


x = ml2;
y = mt0+ h + mt2;
$("#pf2").css({left:x + "px", top: y +"px"});

x = ml2 + w + ml3;
y = mt0+ h + mt2;
$("#pf3").css({left:x + "px", top: y +"px"});

x = ml2;
y = mt0+ h + mt2 + h + mt2;
$("#pf4").css({left:x + "px", top: y +"px"});

x = ml2 + w + ml3;
y = mt0+ h + mt2 + h + mt2;
$("#pf5").css({left:x + "px", top: y +"px"});

x = ml0 + w + ml1;
y = mt0+ h + mt2 + h + mt2 + h + mt2;
$("#pf6").css({left:x + "px", top: y +"px"});

x = ml0;
y = mt0+ h + mt2 + h + mt2 + h + mt2;
$("#pf7").css({left:x + "px", top: y +"px"});