JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<script src="https://fonts.googleapis.com/css?family=Rubik+Mono+One"></script>
<h1>UNITED STATES OF AMERCIA</h1>

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  font-family: 'Rubik Mono One', sans-serif;
}
body {
  margin:.5vw;
}
h1.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 25vw;
}
h1.flex span {
  xoutline:1px solid #ccc;
  line-height: .9;
}
h1.flex span:nth-child(7),
h1.flex span:nth-child(17) {
  width: 100%;
}
h1.flex span:nth-child(14) {
  width: 1ex;
}
h1.flex span:nth-child(8),
h1.flex span:nth-child(8) ~ span {
  xcolor: blue;
  font-size: 15.5vw;
}
h1.flex span:nth-child(18):nth-child(18),
h1.flex span:nth-child(18) ~ span {
  xcolor: red;
  font-size: 20vw;
}

JavaScript

var h1 = document.querySelector('h1'),
 t = h1.innerText.split('');

h1.innerHTML = '<span>'+t.join('</span><span>')+'</span>';
h1.className += 'flex';