JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<div class="container">
	<div class="row">
		<div class="col-md-4" data-height="300"></div>
		<div class="col-md-4" data-height="300"></div>
		<div class="col-md-4" data-height="800"></div>
	</div>
</div>

CSS

.block {
    background-color: grey;
    margin: 10px;
    height: 50px;
}

JavaScript

/* Create the tile object */
var ui = {

	block:  $('<div>', {
        
        class: 'block'
    
    })  
}

/* Map the tile object to all instances of bootstrap columns */
$('div[class*="col-"]').html(ui.block);


/* Set the height by data-attr */

$('.tile').each(function(){ 
    var size = $(this).attr('data-height');
    $(this).find('.tile').height(size);
});