JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <title>Quiz</title>
  </head>

  <body>
    <div class="grid">
      <div id="quiz">
        <h1>Quiz</h1>

        <div id="starter">
          <i>  Skriv in ditt smeknamn för att kunna starta quizen.</i>
        </div>
        <div id="formbox">

          <form>
            <input type="text" id="nameInput" placeholder="Smeknamn" style="float:left;">
            <input type="button" id="nameButton" class="buttonn" value="Starta" style="float:left; margin-left:5px;">
          </form>
        </div>

        <div id="question-wraper">
          <div style="float:left; font-size:20px;">

            <i>Ditt smeknamn:</i>

          </div>
          <b> <div id="displayedName" style="float:left; margin-left:5px; margin-top:4px;">
      
      </div></b>
          <br>
          <p>
            Du har <b><span id="countdowntimer">20 </span></b> sekunder på dig att svara </p>
          <hr id="hr-top">
          <p id="question"></p>

          <div class="buttons">
            <button id="btn0"><span id="choice0"></span></button>
            <button id="btn1"><span id="choice1"></span></button>
            <button id="btn2"><span id="choice2"></span></button>
            <button id="btn3"><span id="choice3"></span></button>
          </div>

          <hr id="hr-bottom">
        </div>


        <footer>
          <p id="progress">Fotbollquiz</p>
        </footer>
      </div>
    </div>
    <script src="build.js"></script>
  </body>

</html>

CSS

body {
  background-color: #eeeeee;
}

#question-wraper {
  display: none;
}

.grid {
  width: 600px;
  height: 500px;
  margin: 0 auto;
  background-color: #fff;
  padding: 10px 50px 50px 50px;
  border-radius: 50px;
  border: 2px solid #cbcbcb;
  box-shadow: 10px 15px 5px #cbcbcb;
}

.buttonn {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 1.5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.grid h1 {
  font-familyh: sans-serif;
  background-color: #57636a;
  font-size: 60px;
  text-align: center;
  color: #fff;
  padding: 2px 0px;
  border-radius: 50px;
}

.grid #question {
  font-family: sans-serif;
  font-size: 20px;
  color: #5a6772;
}

.buttons {
  margin-top: 30px;
}

#btn0,
#btn1,
#btn2,
#btn3 {
  background-color: #;
  width: 250px;
  font-size: 20px;
  color: #fff;
  border: 1px solid #1d3c6a;
  border-radius: 50px;
  margin: 10px 40px 10px 0px;
  padding: 10px 10px;
}

#hr-top {
  margin-top: 20px;
}

#hr-bottom {
  margin-top: 60px;
}

#progress {
  color: #2b2b2b;
  font-size: 10px;
}

#btn0:hover,
#btn1:hover,
#btn2:hover,
#btn3:hover {
  cursor: pointer;
  background-color: #57636e;
}

#btn0:focus,
#btn1:focus,
#btn2:focus,
#btn3:focus {
  outline: 0;
}

footer {
  position: absolute;
  right: 0;
  bottom: -50px;
  ;
  left: 0;
  text-align: center;
}

#starter {
  font-size: 20px;
  color: red;
  margin-bottom: 15px;
}

JavaScript

//Question.js

function Question(text, choices, answer) {
  this.text = text;
  this.choices = choices;
  this.answer = answer;
}

Question.prototype.correctAnswer = function(choice) {
  return choice === this.answer;
}

let timeleft = 20;
let totaltime = 0;
let downloadTimer;

function intervalTick() {
  timeleft--;
  totaltime++;
  document.getElementById("countdowntimer").textContent = timeleft;
  if (timeleft <= 0) {
    clearInterval(downloadTimer);
    resetGame();
    alert("Tiden tog slut, klicka på OK för att börja om.");
  }
}
let name = ''; // Empty string
let input = document.getElementById('nameInput');
let nameBtn = document.getElementById('nameButton');

nameBtn.addEventListener('click', updateBtn);

function updateBtn() {
  name = input.value
  document.getElementById("displayedName").innerHTML = name
  input.value = '' // clear input field
  downloadTimer = setInterval(intervalTick, 1000);
}




function Quiz(questions) {
  this.score = 0;
  this.questions = questions;
  this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
  return this.questions[this.questionIndex];
};

Quiz.prototype.isEnded = function() {
  return this.questions.length === this.questionIndex;
};
Quiz.prototype.peek = function(answer) {
  return (this.getQuestionIndex().correctAnswer(answer));
}

Quiz.prototype.guess = function(answer) {
  if (this.peek(answer)) {
    this.score++;
    this.questionIndex++;
  }

};

function resetGame() {
  //Nollställer poängen
  quiz.score = 0;
  // nollställer spelet
  document.getElementById('question-wraper').style.display = 'none';
  // gör så div taggen starter dyker fram på startsidan efter fel svar eller tiden runnit ut
  document.getElementById('starter').style.display = 'block';
  // gör så div taggen formbox dyker fram på startsidan efter fel svar eller tiden runnit ut
  document.getElementById('formbox').style.display = 'block';
  //Nollställer
  quiz.questionIndex = 0;
  //Nollställer spelarens namn
 ...