JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <title>Ping Pong</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css">
        <meta charset="UTF-8">
        <script language="javascript" type="text/javascript" src="p5.js"></script>
        <!-- uncomment lines below to include extra p5 libraries -->
        <!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
        <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
        <script language="javascript" type="text/javascript" src="ping pong js.js"></script>
        <!-- this line removes any default padding and style. you might only need one of these values set. -->
        <style>
            body {
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    
<h1 class="menu"> Ping Pong </h1>

    
<h2 class="noHide">Hi Score:</h2>

    
    <body>
        <!-- Play button -->
        <button type="button" class="menu" class="btn" id="play">Play</button>
        <!-- Options Button-->
        <button type="button" class="menu" class="btn" id="opt">Options</button>
        <!-- Game Mode 1-->
        <button type="button" class="menu2" id="gm1">Game Mode 1</button>
        <!-- Game Mode 2 -->
        <button type="button" class="menu2" id="gm2">Game Mode 2</button>
        <!-- Back Button -->
        <button type="button" class="menu2" id="back">Back</button>
    </body>

</html>

CSS

button {
    background-color:#ed8223;
    color:#fff;
    font-family:'Helvetica Neue', sans-serif;
    font-size:18px;
    line-height:30px;
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border:0;
    text-shadow:#C17C3A 0 -1px 0;
    width:140px;
    height:32px;
    position : absolute;
    top : 60%;
    left : 50%;
    display: block;
}
#gm1 {
    position : absolute;
    top : 60%;
    left : 50%;
    display: block;
    opacity: 0.8;
}
#gm2 {
    position : absolute;
    top : 50%;
    left : 50%;
    display: block;
}
#back {
    position : absolute;
    top : 55%;
    left : 50%;
    right : 50%;
    display: block;
}
#play {
    position : absolute;
    top : 55%;
    left : 50%;
    right : 50%;
    display: block;
}

JavaScript

// JavaScript Document
//GAME PING PONG
//null
// object quotes?
//better way to add and remove 
//js elements dynamically for Menu
//if point not returned then -5s
// game mode 2 you loose more yimer seconds, gain points^2 and ball moves faster
console.log("HI");
//start-menu 
function setup() {
  // uncomment this line to make the canvas the full size of the window
  createCanvas(windowWidth, windowHeight);
};
var menu = document.getElementsByClassName("menu");
var menu2 = document.getElementsByClassName("menu2");
var gm = 1;
var gameStarted = false;

// for the back button etc
var createMenu = function()
{
	
menu[0].style.display = "block";
menu[1].style.display = "block";
menu[2].style.display = "block";
menu2[0].style.display = "none" ;
menu2[1].style.display = "none" ;
menu2[2].style.display = "none" ;
	
};
createMenu();
// Play button
var play = document.getElementById("play");
play.addEventListener("click", startGame);
var openOpt = function() {
menu2[0].style.display = "block";
menu2[1].style.display = "block";
menu2[2].style.display = "block";
menu[0].style.display = "none" ;
menu[1].style.display = "none" ;
menu[2].style.display = "none" ;
	
};

// Option button
var opt = document. getElementById("opt");
opt.addEventListener("click", openOpt) ;
var gameStarted = false;

//back button
var back = document.getElementById("back");
back.addEventListener("click", createMenu);

//GameMode 1 button
var gm1 = document.getElementById("gm1");
var gm1Click = function (){
gm = 1;
gm1.style.opacity = "0.8";
gm2.style.opacity ="1";
};
gm1.addEventListener("click", gm1Click);
    

//GameMode 2 button
var gm2 = document.getElementById("gm2");
var gm2Click = function (){
gm = 2;
gm2.style.opacity = "0.8";
gm1.style.opacity ="1";
};
gm2.addEventListener("click", gm2Click);

// Play button
//removes html and "starts game"
var startGame = function() {
menu2[0].style.display = "none";
menu2[1].style.display = "none";
menu2[2].style.display = "none";
menu[0].style.display =...