JSFiddle - React, Tailwind, and code Playground

Colors generation (htmlacademy less course trick)

by schrodingers

HTML

<div id="circles">
  <div class="circle-1">
  </div>
  <div class="circle-2">
  </div>
  <div class="circle-3">
  </div>
  <div class="circle-4">
  </div>
  <div class="circle-5">
  </div>
</div>
<div id="stairs">
  <div class="st-1">
  </div>
  <div class="st-2">
  </div>
  <div class="st-3">
  </div>
  <div class="st-4">
  </div>
  <div class="st-5">
  </div>
  <div class="st-6">
  </div>
  <div class="st-7">
  </div>
  <div class="st-8">
  </div>
  <div class="st-9">
  </div>
  <div class="st-10">
  </div>
</div>

SCSS

#main {
  display: flex;  
  justify-content: center;    
}

#circles {
  display: flex;    
  justify-content: center;    
}

@for $i from 0 through 6 {  
  .circle-#{$i} {
    background-color: hsl(50 * $i, 90%, 50%);
  }
}

 div[class^="circle"] {  
  box-sizing: border-box;
  display: inline-block;      
  padding: 1em;
  margin: 1em;    
  height: 2em;
  width: 2em;
  border-radius: 50%; 
  display: none;    
} 

#stairs {
  
}
  


@for $i from 1 through 20 {
    .st-#{$i} { 
      margin: 0.05em;
      background-color: hsl(25*$i, 80%, 80%);         
      width: 10 * $i + '%';
      height: 1em;
}
}