JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
</style>


<!-- Red -->
<div class="color-group red">
  <span>Red</span>
  <div class="red-1"></div>
  <div class="red-2"></div>
  <div class="red-3"></div>
  <div class="red-4"></div>
  <div class="red-5"></div>
</div>

<!-- Green -->
<div class="color-group green">
  <span>Green</span>
  <div class="green-1"></div>
  <div class="green-2"></div>
  <div class="green-3"></div>
  <div class="green-4"></div>
  <div class="green-5"></div>
</div>

<!-- Blue -->
<div class="color-group blue">
  <span>Blue</span>
  <div class="blue-1"></div>
  <div class="blue-2"></div>
  <div class="blue-3"></div>
  <div class="blue-4"></div>
  <div class="blue-5"></div>
</div>

<!-- Cyan -->
<div class="color-group cyan">
  <span>Cyan</span>
  <div class="cyan-1"></div>
  <div class="cyan-2"></div>
  <div class="cyan-3"></div>
  <div class="cyan-4"></div>
  <div class="cyan-5"></div>
</div>

<!-- Pink -->
<div class="color-group pink">
  <span>Pink</span>
  <div class="pink-1"></div>
  <div class="pink-2"></div>
  <div class="pink-3"></div>
  <div class="pink-4"></div>
  <div class="pink-5"></div>
</div>

<!-- Magenta -->
<div class="color-group magenta">
  <span>Magenta</span>
  <div class="magenta-1"></div>
  <div class="magenta-2"></div>
  <div class="magenta-3"></div>
  <div class="magenta-4"></div>
  <div class="magenta-5"></div>
</div>

<!-- Brown -->
<div class="color-group brown">
  <span>Brown</span>
  <div class="brown-1"></div>
  <div class="brown-2"></div>
  <div class="brown-3"></div>
  <div class="brown-4"></div>
  <div class="brown-5"></div>
</div>

<!-- Orange -->
<div class="color-group orange">
  <span>Orange</span>
  <div class="orange-1"></div>
  <div class="orange-2"></div>
  <div class="orange-3"></div>
  <div class="orange-4"></div>
  <div class="orange-5"></div>
</div>

<!-- Yellow -->
<div class="color-group yellow">
  <span>Yellow</span>
 ...

CSS

body {

  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;


}

.color-group {

  padding: 7px 20px;
  display: flex;
  align-items: center;
  border-radius: 26px;
  margin-bottom: 12px;
  width: 280px;
}
.color-group > span {
  width: 100px;
overflow: hidden;
}

.color-group > div {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 3px;
}

.red {
  color: #FF0000;
  background-color: #FFEBEB;
}
.red:hover {
  background-color: #FFE3E3;
}

.red-1 { background-color: #FF6666; }
.red-2 { background-color: #FF4D4D; }
.red-3 { background-color: #ff0000; }
.red-4 { background-color: #C61A15; }
.red-5 { background-color: #8D060A; }

.green {
  color: #32A738;
  background-color: #E7F7E5;
}
.green:hover {
  background-color: #DCF3D9;
}

.green-1 { background-color: #7EDE76; }
.green-2 { background-color: #60C758; }
.green-3 { background-color: #32A738; }
.green-4 { background-color: #058819; }
.green-5 { background-color: #026010; }

.blue {
  color: #006BFF;
  background-color: #E8F2FF;
}

.blue:hover {
  background-color: #E0EDFF;
}

.blue-1 { background-color: #76AFFE; }
.blue-2 { background-color: #4D97FF; }
.blue-3 { background-color: #006BFF; }
.blue-4 { background-color: #0056CC; }
.blue-5 { background-color: #004099; }

.cyan {
  color: #2BC2BD;
  background-color: #E4FCFA;
}

.cyan:hover {
  background-color: #D9FBF8;
}

.cyan-1 { background-color: #62EDE2; }
.cyan-2 { background-color: #55E3DA; }
.cyan-3 { background-color: #2BC2BD; }
.cyan-4 { background-color: #00A0A0; }
.cyan-5 { background-color: #007474; }

.pink {
  color: #DF10B7;
  background-color: #FDF0FB;
}

.pink:hover {
  background-color: #FCEAF9;
}

.pink-1 { background-color: #EF88DB; }
.pink-2 { background-color: #E958CD; }
.pink-3 { background-color: #DF10B7; }
.pink-4 { background-color: #BE0E9C; }
.pink-5 { background-color: #9C0B80; }

.magenta {
  color: #990CAB;
  background-color: #F8EDF9;
}

.magenta:hover {
  background-color:...