JSFiddle - React, Tailwind, and code Playground
HTML
<div class="mockup">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
SCSS
.mockup {
width: 100px;
position: relative;
height: inherit;
background: black;
padding-left: 50px;
.block {
position: absolute;
background: white;
width: 50px;
height: 50px;
border: 1px solid black;
}
}
$i: 0;
$total: 8;
@while $i < $total {
.block {
&:nth-child(#{$i}) {
top: (50*$i)+px;
}
}
$i: $i + 1;
}
JavaScript
//numero de blocos
var blocks = $('.block').length;
//altura de um dos blocos
var altura = $('.block').height();
//multiplicação para o tamanho
altura *= blocks;
//atribuição da altura
$('.mockup').css('height', altura);