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 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>
    <form>
 
  <input type="text" id="nameInput" placeholder="Smeknamn"><br>
  <input type="button" id="nameButton" value="Välj">
</form>
      <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">

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

CSS

body {
  background-color: #eeeeee;
}

.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;
}

.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;
}

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 downloadTimer;
    
function intervalTick() {
	timeleft--;
  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');
let txt = document.querySelector('p');

nameBtn.addEventListener('click', updateBtn);

function updateBtn () {
if(name !== "") {
name = input.value
document.getElementById("displayedName").innerHTML = name
input.value = '' // clear input field
downloadTimer = setInterval(intervalTick,1000);
} else {
alert("Du måste skriva in ditt nickname innan du kan starta quizen")
}
}



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
    quiz.questionIndex = 0;
    //Nollställer spelarens namn
    document.getElementById("displayedName").innerHTML = '';
    //Nollställer textboxen
    document.getElementById('nameInput').value = '';
    //Nollställer timer
    clearInterval(downloadTimer);
    //Nollställer utseendet av timern
    timeleft = 21;
    intervalTick();
    populate();
}

function...