JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Wheel of Success!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="main-container">
      <div id="overlay" class="start">
        <h2 class="title">Wheel of Success</h2>
        <a class="btn__reset">Start Game</a>
      </div>

      <div id="banner" class="section">
        <h2 class="header">Wheel of Success</h2>
      </div>

      <div id="phrase" class="section">
        <ul></ul>
      </div>
      <div id="qwerty" class="section">
        <div class="keyrow">
          <button>q</button><button>w</button><button>e</button><button>r</button><button>t</button><button>y</button><button>u</button><button>i</button><button>o</button><button>p</button>
        </div>
        <div class="keyrow">
          <button>a</button><button>s</button><button>d</button><button>f</button><button>g</button><button>h</button><button>j</button><button>k</button><button>l</button>
        </div>
        <div class="keyrow">
          <button>z</button><button>x</button><button>c</button><button>v</button><button>b</button><button>n</button><button>m</button>
        </div>
      </div>

      <div id="scoreboard" class="section">
        <ol>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
        </ol>
      </div>
    </div>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 ...

CSS

/* Main styles */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&Roboto:300');

/* Variables */

:root {
  --color-win: #78CF82;
  --color-lose: #D94545;
  --color-start: #5b85b7;
  --color-neutral: #445069;
  --color-neutral-light: #D2D2D2;
  --color-keys: #37474F;
  --color-keys-light: #E5E5E5;
  --font-size-large: 60px;
  --font-size-medium: 20px;
  --transition: all .2s ease-in-out;
}

/* main */

* {
  box-sizing: border-box;
}

body {
  justify-content: space-evenly;
  flex-direction: column;
  display: flex;
  height: 100vh;
}

li, ol, ul {
  padding: 0;
  display: inline-block;
}

h2 {
  margin: 0;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--font-size-large);
  margin: 0;
}

button {
  margin: 6px;
  border: 1px solid transparent;
  padding: .5rem 1rem;
  color: var(--color-keys);
  font-size: var(--font-size-medium);
  background-color: var(--color-keys-light);
  border-radius: 5px;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);

}

.main-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  max-height: 900px;
  text-align: center;
}

.section {
  width: 100%;
  padding: 10px;
}

/* Title */

.header {
  color: var(--color-start);
}

/* Phrase */

.letter {
  font-size: var(--font-size-medium);
  height: 65px;
  width: 65px;
  padding: 20px 1px 0 1px;
  margin-right: 2px;
  color: transparent;
  background: var(--color-neutral-light);
  border-radius: 5px;
}

.space {
  width: 15px;
}

.show {
  color: #000;
  background-color: #76CE82;
}

/* Keyboard */

.keyrow {
  display: flex;
  justify-content: center;
}

.chosen {
  background: var(--color-neutral);
  border-radius: 5px;
  font-size: var(--font-size-medium);
  color: #FFFFFF;
}

.btn__reset {
  padding: 8px;
  margin: 50px auto;
  background: #FFFFFF;
  border-radius: 5px;
  font-size: var(--font-size-medium);
}

/*...

JavaScript

const qwerty = document.querySelector("#qwerty");
let phrase = document.querySelector("#phrase");
let missed =  0;
const reset = document.querySelector(".btn__reset");
const startScreen = document.querySelector(".start");
let myPhrase ;
const phrases = [
"Knowledge comes, but wisdom lingers.",
"In the end, everything is a gag.",
"Fortune favors the brave.",
"A joke is a very serious thing.",
"Where there is love there is life."
];
const ul = document.querySelector("ul");

const regex = /^[a-zA-Z]+$/

console.log(regex.test("hello."))


reset.addEventListener("click", () => {
	//fades layover out, jquery
	// $(startScreen).animate({opacity: 0});
	startScreen.style.display = "none"
});


function getRandomPhraseAsArray (arr) {
	//picks random number from 0-4 for array index
 	let num = Math.floor(5 * Math.random());
 	//splits that string of specified index into array of letters
 	myPhrase =  arr[num].split("");
 	console.log(myPhrase);
 	//returns that new array of letters in a variable called myPhrase
 	return myPhrase;
}

function addPhraseToDisplay(myPhrase){
  for (let i = 0 ; i < myPhrase.length ; i++ ){
  	//creates a new list item  elemetn
  	const li = document.createElement("li");
//for each letter/index in array, a new list item is created
  	li.textContent += myPhrase[i];
  	//appends those elements to the ul
  	  ul.appendChild(li);
  	  // if the letter at index "i" is an empty string, " " 
  	  // give it the specified class
  	 if (myPhrase[i] == " "){
  	 	li.classList = "space";
  	 	//if element is a ., no class
  	 	//change this to regex to filter out .
  	 } else if (myPhrase[i] == "." || myPhrase[i] == ","){
  	 		li.className != "letter"
  	 }
  	 //if letter, add class name letter
  	 else {
  	 	li.className = "letter";
  	 }
  }
  //return the list items of the letters
  return myPhrase
}

function checkLetter(clickedLetter) {
	let letterFound = ""
	if (clickedLetter.tagName == "BUTTON"){
		clickedLetter.className =...