JSFiddle - React, Tailwind, and code Playground

HTML

<div id='content'>
<table> <!-- Tabular display of items 9x9 or bigger -->
<tr>
  <td><input type="button" id="btn1" value="Item 1" /></td>
  <td><input type="button" id="btn2" value="Item 2" /></td>
  <td><input type="button" id="btn3" value="Item 3" /></td>
</tr>
<tr>
  <td><input type="button" id="btn4" value="Item 4" /></td>
  <td><input type="button" id="btn5" value="Item 5" /></td>
  <td><input type="button" id="btn6" value="Item 6" /></td>
</tr>
<tr>
  <td><input type="button" id="btn" value="Empty" /></td>
  <td><input type="button" id="btn" value="Empty" /></td>
  <td><input type="button" id="btn" value="Empty" /></td>
</tr>
<tr>
  <td>Shop</td> <!-- links to respective pages -->
  <td>Inven.</td>
  <td></td>
</tr>
</table>
</div>
<!--This button would be on top of every page except checkout -->
<input type='button' id='hideshow' value='Inventory Toggle'>


<div id="overlay"></div>
<div id="popup">
  <p>Item property n</p>
  <p>Post Id</p>
  <p>Apply item to current thread</p>
  
</div>

CSS

#hideshow {
    position: fixed;
    bottom: 10px;
    left: 10px; 
}
#content {
  position: fixed;
  bottom:50px;
  left: 10px;
  width: 50px;
 
}
#overlay{
    display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1000;
	background-color:#333;
	opacity:.80;
}

#popup{
   color: #333;
	display: none;
	position: absolute;
	top: 40%;
	left: 40%;
	width:200px;
    height: 200px;
	padding: 1em;
	border: 5px solid #333;
	background-color: white;
	text-align: left;
	z-index:1001;
	overflow: auto;
	font-size:16px;
}

JavaScript

$(document).ready(function(){
    $('#hideshow').live('click', function(event) {        
         $('#content').toggle('show');
    });
});

$('#btn1, #btn2, #btn3, #btn4, #btn5, #btn6').click(function(){
    $('#overlay, #popup').css('display', 'block');
});

$('#overlay').click(function(){
    $('#overlay, #popup').css('display', 'none');
});