JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Opus.COLORs Episode Color Codes</h1>
<div class="container">
  <div>1<br><small>#ffd900</small></div>
  <div>2<br><small>#d91e10</small></div>
  <div>3<br><small>#f19072</small></div>
  <div>4<br><small>#00000000</small></div>
  <div>5<br><small>#6e60a8</small></div>
  <div>6<br><small>#000000</small></div>
  <div>7<br><small>#20AEE5</small></div>
  <div>8<br><small>#EAF4FC</small></div>
  <div>9<br><small>#e4007f</small></div>
  <div>10<br><small>#f36c21</small></div>
  <div><br><small></small></div>
  <div><br><small></small></div>
</div>

CSS

body {
  background: beige;
  display: grid;
  justify-items: center;
}

h1 {
  text-align: center;
}

small {
  font-size: 65%;
}

.container {
  display: flex;
  gap: 0.2em;
  flex-flow: row wrap;
  flex: auto;
  justify-content: center;
  font-family: fantasy;
  font-size: x-large;
  max-width: 700px;
}

.container>div {
  width: 100px;
  height: 100px;
  outline: 1px solid #00000050;
  text-align: center;
  /* line-height: 100px; */
  line-height: 2;
  text-transform: uppercase;
}

.container>div:nth-of-type(1) {
  background-color: #ffd900;
}

.container>div:nth-of-type(2) {
  background-color: #d91e10;
  color: #fff;
}

.container>div:nth-of-type(3) {
  background-color: #f19072;
}

.container>div:nth-of-type(4) {
  background-color: #00000000;
  /* transparent */
}

.container>div:nth-of-type(5) {
  background-color: #6e60a8;
}

.container>div:nth-of-type(6) {
  background-color: #000000;
  color: #fff;
}

.container>div:nth-of-type(7) {
  background-color: #20AEE5;
}

.container>div:nth-of-type(8) {
  background-color: #EAF4FC;
}

.container>div:nth-of-type(9) {
  background-color: #e4007f;
}

.container>div:nth-of-type(10) {
  background-color: #f36c21;
}

.container>div:nth-of-type(11) {
  /* background-color: #; */
}

.container>div:nth-of-type(12) {
  /* background-color: #; */
}