JSFiddle - React, Tailwind, and code Playground

by Stéphane Cabaret

HTML

<div class="row">
  <div class="box tomato"></div>
  <div class="box dark-20"></div>
  <div class="box dark-50"></div>
  <div class="box dark-80"></div>
  <div class="box dark-100"></div>
</div>

<div class="row">
  <div class="box teal"></div>
  <div class="box light-20"></div>
  <div class="box light-50"></div>
  <div class="box light-80"></div>
  <div class="box light-100"></div>
</div>

<div class="row">
  <div class="box purple"></div>
  <div class="box opacity-20"></div>
  <div class="box opacity-50"></div>
  <div class="box opacity-80"></div>
  <div class="box opacity-100"></div>
</div>

<div class="row">
  <div class="box red"></div>
  <div class="box mix-20"></div>
  <div class="box mix-50"></div>
  <div class="box mix-80"></div>
  <div class="box green"></div>
</div>

CSS

body {
  background-color: #93b2eb;
  opacity: 1;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg, #ffffff 0, #ffffff 1px, #93b2eb 0, #93b2eb 50%);
}

.row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.box {
  display: inline-block;
  height: 65px;
  width: 65px;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.tomato {
  background-color: tomato;
}

.dark-20 {
  background-color: color-mix(in srgb, tomato, black 25%);
}

.dark-50 {
  background-color: color-mix(in srgb, tomato, black 50%);
}

.dark-80 {
  background-color: color-mix(in srgb, tomato, black 75%);
}

.dark-100 {
  background-color: color-mix(in srgb, tomato, black 100%);
}

.teal {
  background-color: teal;
}

.light-20 {
  background-color: color-mix(in srgb, teal, white 20%);
}

.light-50 {
  background-color: color-mix(in srgb, teal, white 50%);
}

.light-80 {
  background-color: color-mix(in srgb, teal, white 80%);
}

.light-100 {
  background-color: color-mix(in srgb, teal, white 100%);
}

.purple {
  background-color: purple;
}

.opacity-20 {
  background-color: color-mix(in srgb, purple, transparent 20%);
}

.opacity-50 {
  background-color: color-mix(in srgb, purple, transparent 50%);
}

.opacity-80 {
  background-color: color-mix(in srgb, purple, transparent 80%);
}

.opacity-100 {
  background-color: color-mix(in srgb, purple, transparent 100%);
}

.red {
  background-color: red;
}

.mix-20 {
  background-color: color-mix(in srgb, red, green 20%);
}

.mix-50 {
  background-color: color-mix(in srgb, red, green 50%);
}

.mix-80 {
  background-color: color-mix(in srgb, red, green 80%);
}

.green {
  background-color: green;
}