JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
<div id="dicewrapper" class="container d-flex bg-warning">
<div id="dice1" class="dice">1</div>
<div id="dice2" class="dice">2</div>
<div id="dice3" class="dice">3</div>
<div id="dice4" class="dice">4</div>
<div id="dice5" class="dice">5</div>
</div>

CSS

.dice{
	background-color: #ff00ff;
}

JavaScript

$(window).on('resize load', function(){
		dynamicdicesize();
		
});

function dynamicdicesize(){

		wrapperwidth = $("#dicewrapper").innerWidth();
		dicehw = wrapperwidth / 5
		//alert(dicehw);
		
		$(".dice").height(dicehw).width(dicehw);
		
}