JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
     <!-- Load custom style -->
    <link href="../assets/css/style.css" rel="stylesheet">
    <!-- defer - script that will not run until after the page has loaded: -->
    <script defer src="../assets/js/script.js"></script>
    <!-- Load Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">

	<title>Virtual Piano</title>
</head>

<body>

<div id="title-header">
    <h1>Hola</h1> 
    <h3>Miten</h3>    
</div>

<div class="container">
    <div class="piano-container">
        <!-- 1st Octave Keys -->
        <div data-keynote="Octave1-C" class="key white"></div>
        <div data-keynote="Octave1-C#" class="key black"></div>
        <div data-keynote="Octave1-D" class="key white"></div>
        <div data-keynote="Octave1-D#" class="key black"></div>
        <div data-keynote="Octave1-E" class="key white"></div>
        <div data-keynote="Octave1-F" class="key white"></div>
        <div data-keynote="Octave1-F#" class="key black"></div>
        <div data-keynote="Octave1-G" class="key white"></div>
        <div data-keynote="Octave1-G#" class="key black"></div>
        <div data-keynote="Octave1-A" class="key white"></div>
        <div data-keynote="Octave1-A#" class="key black"></div>
        <div data-keynote="Octave1-B" class="key white"></div>

        <!-- 2nd Octave Keys -->
        <div data-keynote="Octave2-C" class="key white"></div>
        <div data-keynote="Octave2-C#" class="key black"></div>
        <div data-keynote="Octave2-D" class="key white"></div>
        <div data-keynote="Octave2-D#" class="key black"></div>
        <div data-keynote="Octave2-E" class="key white"></div>
        <div data-keynote="Octave2-F" class="key...

CSS

body {
    background-color:black;
    margin: 0;
    padding: 0;

}

h1{
    font-weight: 700;
    color: #ffffff;
    font-size: 6rem;
    margin-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 
      -1px -1px 1px #111, 
      2px 2px 1px #363636;
      letter-spacing: 0.5rem;
}

h3{
    font-size: 1.3rem;
    color: #dedede;
    margin-top: -25px !important;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 
    -1px -1px 1px #111, 
    2px 2px 1px #363636;
    letter-spacing: 0.5rem;
}


#title-header{
    margin-top: 130px;
}


.container{
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.piano-container {
    display: flex;
    max-width: 80vw;
    background: #dedede;
    border: 10px solid #333333;
    padding: 50px 30px 0px 30px;
    -webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}


.white {
    width: 10vw;
    height: 35vh;
    background-color: white;
    color: black;
    border-left: 2px solid #333333;
}

.black {
    width: 7vw;
    height: 22vh;
    background-color: black;
    color: white;
    margin-left: -1.5vw;
    margin-right: -1.5vw;
    z-index: 1;
}


.white.active-keynote{
  background-color: #f2ffdc;
  transition: background-color .3s ease-in-out;
  -webkit-transition: background-color .3s ease-in-out;
  -moz-transition: background-color .3s ease-in-out;
  -o-transition: background-color .3s ease-in-out;
}

 .black.active-keynote{
  background-color: #373d2d;
  transition: background-color .3s ease-in-out;
  -webkit-transition: background-color .3s ease-in-out;
  -moz-transition: background-color .3s ease-in-out;
  -o-transition: background-color .3s ease-in-out;
}



@media only screen and (min-width : 768px) and (max-width: 1224px) {
    h1{
        font-size: 4rem;
  ...