JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Opus.COLORs Episode Color Codes</h1>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

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

h1 {
  text-align: center;
}

.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;
}

.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: #; */
}

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

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

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

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