JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<link href="https://fonts.googleapis.com/css?family=Big+Shoulders+Display|Monoton|Press+Start+2P|Staatliches|VT323&display=swap" rel="stylesheet">


<br><br>
<center>
  <table>
    <tr>
      <td>
        <div class="black">
          BLACK
        </div>
      </td>
      <td></td>
      <td>
        <div class="cyan">
          CYAN
        </div>
      </td>
      <td></td>
      <td>
        <div class="magenta">
          MAGENTA
        </div>
      </td>
      <td></td>
      <td>
        <div class="yellow">
          YELLOW
        </div>
      </td>
      <td></td>
      <td>
        <div class="none">
          NONE
        </div>
      </td>
    </tr>
  </table>
</center>

CSS

body {
  background-color: #024873;
}

.cyan {
  color: #00ffff;
  font-size: 20pt;
  text-decoration: underline overline;
  font-family: 'VT323', monospace;
  text-align: center;
}

.magenta {
  color: #ff00ff;
  font-size: 20pt;
  text-decoration: underline overline;
  font-family: 'VT323', monospace;
  text-align: center;
}

.yellow {
  color: #ffff00;
  font-size: 20pt;
  text-decoration: underline overline;
  font-family: 'VT323', monospace;
  text-align: center;
}

.black {
  color: #000;
  font-size: 20pt;
  font-family: 'VT323', monospace;
  text-decoration: underline overline;
  text-align: center;
}

.none {
  color: #fff;
  font-size: 20pt;
  text-decoration: underline overline;
  font-family: 'VT323', monospace;
  text-align: center;
}