JSFiddle - React, Tailwind, and code Playground

by Josh Krauth-Harding

HTML

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

CSS

html, body {
  padding: 0;
  margin: 0;
}

#wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.letter {
  flex-grow: 1;
  background-image: url("https://via.placeholder.com/150");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

JavaScript

function addLetter() {
	  var letter = document.createElement("div");
    letter.setAttribute('class','letter');
    
    return document.appendChild(letter);
}

window.addEventListener('keydown', function(e) {
  if (e.keyCode == 82) {
    addLetter();
  }
});