JSFiddle - React, Tailwind, and code Playground

by bergb

HTML

<div class="left one"></div>
<div class="left two"></div>
<div class="left three"></div>
<div class="left four"></div>
<div class="left five"></div>
<div class="left six"></div>

CSS

.left{
   float:left;
}
.web-color{
    width:20px;    

}

JavaScript

var h=0;
var s=70;
var l=0;


for(i=0; i<25; i++){
    
  l=i*4;
  if(i>13){
          
    s=s-4;   
 }
  
     
   
 $('.left.one').append('<div class="web-color" style=" background-color: hsla( '+h+', '+s+'%, '+l+'%,1);">.</div>');
  $('.left.two').append('<div class="web-color" style=" background-color: hsla( 64, '+s+'%, '+l+'%,1);">.</div>');   
     $('.left.three').append('<div class="web-color" style=" background-color: hsla( 196, '+s+'%, '+l+'%,1);">.</div>');
  $('.left.four').append('<div class="web-color" style=" background-color: hsla( 186, '+s+'%, '+l+'%,1);">.</div>');
 $('.left.five').append('<div class="web-color" style=" background-color: hsla(186, 0%, '+l+'%,1);">.</div>');
$('.left.six').append('<div class="web-color" style=" background-color: hsla(64, 6%, '+l+'%,1);">.</div>');

}