JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class="color red-1"></div>
<div class="color red-2"></div>
<div class="color red-3"></div>
<div class="color red-4"></div>
<div class="color red-5"></div>
<br>
<div class="color blue-1"></div>
<div class="color blue-2"></div>
<div class="color blue-3"></div>
<div class="color blue-4"></div>
<div class="color blue-5"></div>
<br>
<div class="color yellow-1"></div>
<div class="color yellow-2"></div>
<div class="color yellow-3"></div>
<div class="color yellow-4"></div>
<div class="color yellow-5"></div>

CSS

.color {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-block;
}

.red-1 {
  background-color: hsl(0, 100%, 70%);
}
.red-2 {
  background-color: hsl(0, 100%, 60%);
}
.red-3 {
  background-color: hsl(0, 100%, 50%);
}
.red-4 {
  background-color: hsl(0, 100%, 40%);
}
.red-5 {
  background-color: hsl(0, 100%, 30%);
}

.blue-1 {
  background-color: hsl(240, 50%, 70%);
}
.blue-2 {
  background-color: hsl(240, 100%, 60%);
}
.blue-3 {
  background-color: hsl(240, 50%, 50%);
}
.blue-4 {
  background-color: hsl(240, 100%, 40%);
}
.blue-5 {
  background-color: hsl(240, 100%, 30%);
}

.yellow-1 {
  background-color: hsl(60, 100%, 70%);
}
.yellow-2 {
  background-color: hsl(60, 100%, 60%);
}
.yellow-3 {
  background-color: hsl(60, 100%, 50%);
}
.yellow-4 {
  background-color: hsl(60, 100%, 40%);
}
.yellow-5 {
  background-color: hsl(60, 100%, 30%);
}