JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  
</div>

CSS

body {
  background-color: #333;
}

.row {
  display: flex;
}

.cell {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin: 1px;
  background-color: #111;
}

JavaScript

const $wrapper = document.querySelector('.wrapper');

function rgbToHex(r, g, b) {
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

function hexToBin(num) {
  const bin = parseInt(num).toString(2);
  return (bin.length < 8) ? '0'.repeat(8 - bin.length) + bin : bin;
}

function fontToBin(input) {
  return input.map(row => row.map(num => hexToBin(num)));
}

function setup() {
  const x = 64;
  const y = 16;

  for (let i = 0; i < y; i += 1) {
    const $row = document.createElement('div');
    $row.classList.add('row');
    $wrapper.appendChild($row);
    for (let j = 0; j < x; j += 1) {
      const $cell = document.createElement('div');
      $cell.classList.add('cell', `cell-${i}-${j}`);
      $row.appendChild($cell);
    }
  }
}

function color(x, y, rgba) {
	const $cell = document.querySelector(`.cell-${y}-${x}`);
  if ($cell) {
  	$cell.style.backgroundColor = rgba;
  }
}

const CHAR_WIDTH = 6;
const CHAR_HEIGHT = 8;

function text(ch, line, font, r, g, b) {
	// For each character
	for (let i = 0; i < ch.length; i += 1) {
    const ind = ch.charCodeAt(i) - 32;
    const fontRow = font[ind];
    // For each column
    for (let x = 0; x < CHAR_WIDTH; x += 1) {
      const col = fontRow[x].split('').reverse().join('');
      // For each pixel
      for (let y = 0; y < CHAR_HEIGHT; y += 1) {
        color(x + (i * CHAR_WIDTH), y + (line * CHAR_HEIGHT), col[y] === '0' ? 'black' : rgbToHex(r, g, b));
      }
    }
  }
}

const fivebyfive = fontToBin([
  [0x00,0x00,0x00,0x00,0x00,0x00], //  
  [0x5c,0x00,0x00,0x00,0x00,0x00], // !
  [0x06,0x00,0x06,0x00,0x00,0x00], // "
  [0x28,0x7c,0x28,0x7c,0x28,0x00], // #
  [0x5c,0x54,0xfe,0x54,0x74,0x00], // $
  [0x44,0x20,0x10,0x08,0x44,0x00], // %
  [0x28,0x54,0x54,0x20,0x50,0x00], // &
  [0x06,0x00,0x00,0x00,0x00,0x00], // '
  [0x38,0x44,0x00,0x00,0x00,0x00], // (
  [0x44,0x38,0x00,0x00,0x00,0x00], // )
  [0x02,0x07,0x02,0x00,0x00,0x00], // *
  [0x10,0x10,0x7c,0x10,0x10,0x00], // +
 ...