JSFiddle - React, Tailwind, and code Playground

HTML

<div class="quiz__container" id="quiz">
      <div class="quiz__header">
        <h2 id="question">Question text</h2>
        <ul>
          <li>
            <input class="answer" name="answer" id="a" type="radio" />
            <label id="a_text" for="a">Question</label>
          </li>
          <li>
            <input class="answer" name="answer" id="b" type="radio" />
            <label id="b_text" for="b">Question</label>
          </li>
          <li>
            <input class="answer" name="answer" id="c" type="radio" />
            <label id="c_text" for="c">Question</label>
          </li>
          <li>
            <input class="answer" name="answer" id="d" type="radio" />
            <label id="d_text" for="d">Question</label>
          </li>
        </ul>
      </div>
      <button id="submit">Submit</button>
</div>
      
<div class="result_modal"> </div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:whgt@200;400;600&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #9eabe4;
  background-image: linear-gradient(315deg, #9eabe4 0%, #77eed8 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: "Poppins", sans-serif;
  margin: 0;
}

.quiz__container {
  background-color: #fff;
  width: 600px;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 2px rgba(100, 100, 100, 0.1);
}

.quiz__header {
  padding: 4rem;
}

h2 {
  padding: 1rem;
  margin: 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

input {
  cursor: pointer;
}

ul li {
  cursor: pointer;
  font-size: 1.1rem;
  margin: 1rem 0;
}

ul li label {
  cursor: pointer;
}

button {
  background-color: #A0CADD;
  border: none;
  font-size: 1.2rem;
  color: white;
  font-family: inherit;
  display: block;
  width: 100%;
  padding: 1.3rem;
  cursor: pointer;
  transition: all 0.5s ease;
}

button:hover {
  background-color: #9EEAD9;
}

.result__styles {
  font-size: 30px;
  margin-left: 18px;
}

.reset__styles {
  background: rgb(185, 182, 182);
  border-radius: 10px 10px 0 0;
}

.reset__styles:hover {
  background: rgb(148, 145, 145);
}

.result_modal {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 135px;
    display: none;
    transition: .5s;
}
.show

JavaScript

const quizData = [{
    question: 'Что такое Samehada?',
    a: 'Большой посох',
    b: 'Разговаривающая шляпа',
    c: 'Мистический мечь',
    d: "Отец наруто",
    correct: 'c'
  }, {
    question: "Как зовут маму Наруто?",
    a: 'Kushina',
    b: "Kurama",
    c: 'Haruno',
    d: "Cacol",
    correct: 'a',
  }, {
    question: 'Сколько хвостов у хвостатого Курамы?',
    a: "3",
    b: "7",
    c: '9',
    d: 'Зависит от настроения',
    correct: 'c',
  },
  {
    question: "Какой самый популярный опенинг Наруто?",
    a: "Blood Circulator (19 opening)",
    b: "Silhouette (16 opening)",
    c: "Sign (6 opening)",
    d: "Hero's come back (7 opening)",
    correct: "b"
  }
];
const res_modal = document.querySelector('.result_modal');
const quiz = document.getElementById('quiz');
const answerEls = document.querySelectorAll('.answer');
const questionEl = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const d_text = document.getElementById('d_text');
const submitBtn = document.getElementById('submit');
const result = document.createElement('div');
const reset = document.createElement('button');

let currentQuiz = 0;
let score = 0;

loadQuiz();

function loadQuiz() {
  deletectAnswers();
  const currentQuizData = quizData[currentQuiz];

  questionEl.innerText = currentQuizData.question;
  a_text.innerText = currentQuizData.a;
  b_text.innerText = currentQuizData.b;
  c_text.innerText = currentQuizData.c;
  d_text.innerText = currentQuizData.d;
}

function getSelected() {
  const answerEls = document.querySelectorAll('.answer');

  let answer = undefined;

  answerEls.forEach((answerEl) => {
    if (answerEl.checked) {
      answer = answerEl.id;
    }
  });

  return answer;
}

function deletectAnswers() {
  answerEls.forEach((answerEl) => {
    answerEl.checked = false;
  });
}

submitBtn.addEventListener('click', () => {
 ...