JSFiddle - React, Tailwind, and code Playground

by AdvanTiSS

CSS

div{
    padding: 5px 10px;
}

JavaScript

function makeColor(colorNum, colors){
    if (colors < 1) colors = 1; // defaults to one color - avoid divide by zero
    return colorNum * (360 / colors) % 360;
}


// TEST CODE

var totalDIVs = 25;
var totalColors = totalDIVs;

// you can use this to check stripes od repeating colors
// as the color palette will wrap around
//var totalColors = 10; 

for (var i = 0; i < totalDIVs; i++){
    var element = document.createElement('div');
    document.body.appendChild(element);
    var color = "hsl( " + makeColor(i, totalColors) + ", 100%, 75%)";
    element.style.backgroundColor = color;
    element.innerHTML = color;
}