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>11<br><small>#C44303</small></div>
  <div>12<br><small>#ffffff</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: #C44303;
  color: #fff;
}

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

JavaScript

const episodeData = {
  "opus1": {
    color: '#ffd900',
    number: 1,
    en_episode_title: 'The Intersection of Colors',
    jp_episode_title: '交わる、色と色／#FFD900'
  },
  "opus2": {
    color: '#d91e10',
    number: 2,
    en_episode_title: 'A Knot in the Red Thread of Fate',
    jp_episode_title: '赤い糸の結び目／#D91E10'
  },
  "opus3": {
    color: '#f19072',
    number: 3,
    en_episode_title: 'The Colors of Day and Night That Don\'t Overlap #F19072',
    jp_episode_title: '重なり合わない、陽だまりと夜の色／#F19072'
  },
  "opus4": {
    color: '#00000000',
    number: 4,
    en_episode_title: 'The Transparent Color Waiting in the Woods We\'re Led To #00000000',
    jp_episode_title: '導かれた森に待つ透明／#00000000'
  },
  "opus5": {
    color: '#6e60a8',
    number: 5,
    en_episode_title: 'Gray Thunder #6E60A8',
    jp_episode_title: '灰空の霹靂／#6E60A8'
  },
  "opus6": {
    color: '#000000',
    number: 6,
    en_episode_title: 'Future Plans of Complementary Colors #000000',
    jp_episode_title: '反対色の未来計画／#000000'
  },
  "opus7": {
    color: '#20aee5',
    number: 7,
    en_episode_title: 'The Emperor Loves That Color #20AEE5',
    jp_episode_title: '皇帝は、かの色を愛す／#20AEE5'
  },
  "opus8": {
    color: '#eaf4fc',
    number: 8,
    en_episode_title: 'The Scene That Can Be Seen There #EAF4FC',
    jp_episode_title: 'そこに“視える”景色／#EAF4FC'
  },
  "opus9": {
    color: '#e4007f',
    number: 9,
    en_episode_title: 'The Room Hiding in the Color of Darkness #E4007F',
    jp_episode_title: '闇色の潜む部屋／#E4007F'
  },
  "opus10": {
    color: '#f36c21',
    number: 10,
    en_episode_title: 'The Faint Distance of Orange #F36C21',
    jp_episode_title: 'だいだいには淡い距離／#F36C21'
  },
  "opus11": {
    color: '#c44303',
    number: 11,
    en_episode_title: 'The Heat Haze Clouded by Blue #C44303',
    jp_episode_title: '青く濁る陽炎／#C44303'
  },
  "opus12": {
    color: '#ffffff',
    number: 12,
    en_episode_title: 'COLORs #FFFFFF',
    jp_episode_title: 'COLORs／#FFFFFF'
  }
}