JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<meta charset="utf-8">
<title>Database input</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<link rel="stylesheet" type="text/css" href="../extra-filesvb/algemeen.css">
<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
</head>
<body>

 
   
         
        <br>
        <input type="text" id="voornaam123" name="voornaam" size="10"> 
        <label for="index">Index:</label>
        <br>
 
         <button onclick="myFunction()">Click Me</button> 
        <br>
 
    <div id="myDIV">
            <label for="omschrijving"><b>Korte omschrijving van de inhoud</b>:</label><br>
            <textarea id="omschrijving124" name="omschrijving" rows="8" cols="60"> 124 </textarea>
 
            <br>
            <br>
 
            <label for="periode"><b>Periode</b> die in het bestand behandeld wordt.</label><br>
            Van <input type="text" id="periode0125" name="periode0" value="125" size="5"> 
            Tot <input type="text" id="periode1125" name="periode1" value="126" size="4">
    </div>
        <br>
        <br>
 
        
        <input type="submit" value="Bewerken"> 
        <input type="button" name="cancel" value="cancel" onclick="Terug()" >