JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<div class="color blue">
Cerulean Blue
</div>
<div class="color light light-blue">
Iceberg
</div>
<div class="color red">
Alabama Crimson
</div>
<div class="color light light-red">
Old Rose
</div>
<div class="color green">
May Green
</div>
<div class="color light light-green">
Eton Blue
</div>
<div class="color black">
Dark Gunmetal
</div>
<div class="color grey">
Feldgrau
</div>
<div class="color light pink">
Persian Pink
</div>
<div class="color light white">
Gainsboro
</div>
<div class="color light orange">
Fulvous
</div>
<div class="color light yellow">
Stil De Grain Yellow
</div>
<div class="color purple">
Japanese Violet
</div>
<div class="color light light-purple">
Glossy Grape
</div>

<div class="balances">
<div class="balance">
<span class="currency-units balanced">0.00</span>
</div>
<div class="balance">
<span class="currency-units positive">111.11</span>
</div>
<div class="balance">
<span class="currency-units positive">888.88</span>
</div>
<div class="balance negative">
<span class="currency-units negative">33.33</span>
</div>
</div>

<div id="font-family">
</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@import url("https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i");

* { box-sizing: border-box; }
body, html {
  margin: 0;
  auto: 0;
  font-family: 'Lato';
  background-color: #3066BE;
  background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/low_contrast_linen.png");
  background-blend-mode: luminosity;
}

.color {
  background: black; /* Override me */
  color: #D7DEDC;
  text-align: right;
  font: 16px;
  padding: 1em;
  padding-top: 4em;
  line-height: 1em;
  float: left;
  width: 50%;
}
.color.light { color: #0D1F2D; }
.blue { background: #3066BE; }
.red { background: #B3001B; }
.black { background: #0D1F2D; }
.light-blue { background: #74B3CE; }
.purple { background: #553555; }
.light-purple { background: #A799B7; }
.white { background: #D7DEDC; }
.grey { background: #4C5B61; }
.light-red { background: #CB807D; }
.green { background: #4C9141; }
.light-green { background: #9BC995; }
.pink { background: #F686BD; }
.yellow { background: #F5CB5C; }
.orange { background: #E28413; }

.balances {
  width: 15em;
  margin: 0 auto;
  padding: 3em 0;
  clear: both;
}
.balance {
  background: #FAFBFB;
  text-align: right;
  border-radius: 2px;
  margin: 1px;
  padding: 3px;
  font-size: 14px;
}
.positive {
  color: #4C9141;
}
.negative {
  color: #B3001B;
}
.currency-units {
  font-feature-settings: 'tnum';
}
.currency-units:before {
  content: "$";
}
.currency-units.negative:before {
  content: "−$";
}

#font-family {
  text-align: center;
  color: white;
}

JavaScript

window.addEventListener('keydown', event => {
  if (event.keyCode === 32) {
    const body = document.getElementsByTagName('body')[0];
    body.style.fontFamily = body.style.fontFamily === 'Lato' ? 'Varela Round' : 'Lato';
    document.getElementById('font-family').innerText = body.style.fontFamily;
  }
})