JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pengame">
  <div id="inventory">
    <h2>Inventory</h2>
    <table id="myitems">
      <tr>
        <td>
          <div class="invetoryitem"> <img class="invetorypic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" />
            <p class="invnumber">1</p>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="invetoryitem"> <img class="invetorypic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" />
            <p class="invnumber">21</p>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

CSS

html,
body {
  background: lightslategray;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#pengame {
  position: relative;
  width: 100%;
  height: 100%;
}

#pengame canvas {
  position: absolute;
  image-rendering: auto;
  object-fit: none;
}

#ingamechat {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#leaderboard {
  position: absolute;
  display: none;
  top: 1.8%;
  right: 100px;
  background: rgb(50, 50, 50, 0.4);
  border-radius: 10px;
  color: white;
}

#inventory {
  position: absolute;
  display: block;
  top: 10%;
  left: calc(1.3% + 320px);
  background: rgb(50, 50, 50, 0.4);
  border-radius: 10px;
  color: white;
  padding: 0px 15px;
  width: 300px;
  max-width: 400px;
  height: 70%;
  max-height: 70%;
  overflow: scroll;
  -webkit-user-select: none;
}

.td {
  padding: 5px;
  position: relative;
  max-width: 55px;
  max-height: 55px;
}

input[type=text] {
  width: 100%;
  padding: 4px 5px;
  box-sizing: border-box;
  color: white;
  opacity: 0.5;
  background: transparent;
  border: none;
}

input:focus {
  outline: none;
}

#infobox {
  position: absolute;
  display: block;
  top: 1.8%;
  left: 1%;
  max-width: 300px;
  background: rgb(50, 50, 50, 0.4);
  padding: 0px 10px;
  border-radius: 25px;
  color: white;
}

#boption {
  height: 35px;
  width: 35px;
  padding: 5px 4px;
  border-radius: 10px;
  -webkit-user-select: none;
}

#shopicon {
  position: absolute;
  display: block;
  top: 1.8%;
  right: 15px;
  background: rgb(50, 50, 50, 0.4);
  border-radius: 10px;
}

#shopicon :hover {
  position: absolute;
  display: block;
  top: 1.8%;
  right: 0%;
  background: rgb(200, 200, 200, 0.4);
  border-radius: 10px;
}

.invetoryitem {
  --displayc: rgb(50, 200, 50, 0.4);
  display: block;
  background: rgb(50, 50, 50, 0.4);
  height: 45px;
  width: 45px;
  padding: 5px 4px;
  border-radius: 10px;
}

.invetorypic {
  height: 45px;
  width: 45px;
}

.invetoryitem :hover {
 ...