JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="1Div">

<h4>Question goes here?</h4>

  <input type="text"id="name1"/>

  <button onclick="myFunction1()" id="button0" class="button3">Enter</button>


</div>


<div id="2Div" style="display:none;">
        <h4 id=typeE>How much time do you think you need in minutes?</h4>
        <button onclick="myFunction2()" id="button1" class="button3">10 minutes</button>
        <button onclick="myFunction3()" id="button2" class="button3">20 minutes</button>
        
</div>

<script>
  function myFunction1(){
    document.getElementById("1Div").style.display="none";
    document.getElementById("2Div").style.display="block";
}
</script>

<script>
  function myFunction2(){
    document.getElementById("2Div").style.display="none";
    document.getElementById("timer10").style.display="block";
  }
</script>

<script>
  function myFunction3(){
    document.getElementById("2Div").style.display="none";
    document.getElementById("timer20").style.display="block";
  }
</script>


<div id="timer10" style="display:none">

<script>
	function startTimer10(duration10, display10) {
    var timer10 = duration10, minutes10, seconds10;
    setInterval(function () {
        minutes10 = parseInt(timer10 / 60, 10);
        seconds10 = parseInt(timer10 % 60, 10);

        minutes10 = minutes10 < 10 ? "0" + minutes10 : minutes10;
        seconds10 = seconds10 < 10 ? "0" + seconds10 : seconds10;

        display10.textContent = minutes10 + ":" + seconds10;

        if (--timer10 < 0) {
            timer10 = duration10;
        }
    }, 1000);
}

window.onload = function () {
    var tenMinutes = 60 * 10,
        display10 = document.querySelector('#time10');
    startTimer10(tenMinutes, display10);
};
</script>
 
 <body>
    
    <center><div><span id="time10">10:00</span></div></center>
    
</body>

</div>


<div id="timer20" style="display:none">
    <script>
	function startTimer20(duration20, display20) {
    var timer20 = duration20, minutes20, seconds20;
   ...