JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<pre>
</pre>

CSS

pre {
   font-family: 'courier new', monospace;
   line-height: 0.8;
}

pre > span {
  height: 1em;
  display: inline-block;
  width: 0.6em;
  text-align: left;
  overflow: hidden;
}

JavaScript

const art = `123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
╭┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╮╭┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄┈╌┈┄╮
╽                                      ▐▌                                      ╽
╿         ▐ ▌ ▐▀▀ ▐   ▐   ▗▀▖ ▌    ▐   ▐▌   ▐▀▀ ▐▀▀ ▐   ▐   ▗▀▖ ▌    ▐         ╿
┋         ▐▀▌ ▐█  ▐   ▐   ▌ ▐ ▙ ▟▙ ▟   ▐▌   ▐▀  ▐█  ▐   ▐   ▌ ▐ ▙ ▟▙ ▟         ┋
╵         ▐ ▌ ▐▄▄ ▐▄▄ ▐▄▄ ▝▄▘ ▝▄▘▝▄▘   ▐▌   ▐   ▐▄▄ ▐▄▄ ▐▄▄ ▝▄▘ ▝▄▘▝▄▘         ╵
╎                                      ▐▌                                      ╎
╷                                      ▐▌                                      ╷
├─╌╴╶╌─╌╴╶╌─╌╴╶╌─╌╴╶╌─╌╴╶╌─╌╴╶╌─╌╴╶╌─╌─╯╰─╌─╌╴╶╌─╌╴╶╌─╌╴╶╌─╌╴╶╌─╌╴╶╌─╌╴╶╌─╌╴╶╌─┤
│  PEOPLE AND PROJECTS FROM YONDER   ▁╱  ╲▁     SALUTARET    AMICI    TUI      │
╟─━═─━═─━═─━═─━═─━╤─━═─━═─━═─━═─━═─━╤┘╲  ╱└┬═━─═━─═━─═━─═━─═━─═━─═━─═━─═━─═━─═━╢
║   ISSUE #0000   │    2020-03-07   │  ╳╳  │ this issue: only 99999 characters ║
╟─━═─━═─━═─━═─━═─━╧─━═─━═─━═─━═─━═─━╧┐╱  ╲┌┴═━─═━─═━─═━─═━─═━─═━─═━─═━─═━─═━─═━╢
║                                    ▔    ▔                                   ║`

const pre = document.querySelector('pre');
[...art].forEach(char => {
  if (char === '\n') {
	  const el = document.createTextNode('\n');
    pre.appendChild(el)
  } else {
	  const el = document.createElement('span');
	  el.textContent = char;
	  pre.appendChild(el);
  }
});