JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>
<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">
<input type ="button" value="hide" onclick="hide()">
<input type ="button" value="show" onclick="show()">

<script>
//I want to declare my variables here
  var div1 = document.getElementById('a');
  var div2 = document.getElementById('b');
  var div3 = document.getElementById('c');

 //And I want to use them here, inside a function. 
  function hide(){
    div1.style.display = 'none';
    div2.style.display = 'none'; 
    div3.style.display = 'none';  
  }
   function show(){
    div1.style.display = 'block';
    div2.style.display = 'block'; 
    div3.style.display = 'block';  
  }
</script>
</body>
</html>