JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<img class="svg-img unique-1" src="https://image.flaticon.com/icons/svg/82/82491.svg">

<img class="svg-img unique-2" src="https://image.flaticon.com/icons/svg/82/82491.svg">

<img class="svg-img unique-3" src="https://image.flaticon.com/icons/svg/82/82491.svg">

<img class="svg-img unique-4" src="https://image.flaticon.com/icons/svg/82/82491.svg">

JavaScript

var options = {
    height: {
        min: 80,
        max: 300,
        unit: 'px'
    }
}

var classes = {
class_1: document.getElementsByClassName("unique-1"),
class_2: document.getElementsByClassName("unique-2"),
class_3: document.getElementsByClassName("unique-3"),
class_4 : document.getElementsByClassName("unique-4")
}


function getRandomInt (min, max, unit) {
    return Math.floor(Math.random() * (max - min + 1)) + min + unit;
}
function randomize() {
  var posts = document.getElementsByClassName("svg-img");
  for (var p = 0; p < posts.length; p++) {
    posts[p].style.height = getRandomInt(options.height.min,options.height.max, options.height.unit);
  }
}

 randomize();