JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<img class="main-image" src="https://cdn.pixabay.com/photo/2017/03/25/18/06/color-2174065_960_720.png">

<img class="sub-image" src="https://cdn.naturettl.com/wp-content/uploads/2019/04/22003658/rain-assign-800x533.jpg">
<img class="sub-image" src="https://cdn.naturettl.com/wp-content/uploads/2019/04/22003658/rain-assign-800x533.jpg">
<img class="sub-image" src="https://cdn.naturettl.com/wp-content/uploads/2019/04/22003658/rain-assign-800x533.jpg">
 <img class="sub-image" src="https://cdn.naturettl.com/wp-content/uploads/2019/04/22003658/rain-assign-800x533.jpg">
<img class="sub-image" src="https://cdn.naturettl.com/wp-content/uploads/2019/04/22003658/rain-assign-800x533.jpg">
<img class="sub-image" src="https://cdn.naturettl.com/wp-content/uploads/2019/04/22003658/rain-assign-800x533.jpg">

CSS

*{
  margin: 0;
}
.main-image {
    height: 100vh;
    width: 75%;
    float: left;
}
.sub-image {
    height: 33.3vh;
    width: 25%;
    float: right;
}

JavaScript

if($('.sub-image').length === 1){
	$('.sub-image').css({"height":"100vh"});
}else if($('.sub-image').length === 2){
	$('.sub-image').css({"height":"50vh"});
}else if($('.sub-image').length === 3){
	$('.sub-image').css({"height":"33.3vh"});
}else if($('.sub-image').length === 4){
	$('.sub-image').css({"height":"25vh"});
}else if($('.sub-image').length === 5){
	$('.sub-image').css({"height":"20vh"});
}else if($('.sub-image').length === 6){
	$('.sub-image').css({"height":"33.3vh"});
  $('.main-image').css({"width":"50%"});
  
}