JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div style="margin-top: 200px;">
  <div id="area" class="wrapper">
    <center>
      <p style="font-size: 38px;font-weight: bold;padding-top: 2px;color: #fff;" id="question"></p>
      <div style="margin-top: 200px;">
        <button onclick="check(0)" class="myButton12" id="option1"></button>
        <button onclick="check(1)" class="myButton12" id="option2"></button>
      </div>
    </center>
  </div>
</div>
<center>
  <div id="rezult" style="margin-top: 200px;font-size: 58px;font-weight: bold;padding-top: 2px;color: #fff;">
  </div>
</center>
<br>
<center>
  <button id="start" class="myButton11" onclick="check(2)">Приступить к тесту</button>
</center>
<div class="buton2">
  <br>
  <button id="end" style="display:none" onclick="rst(1)" class="myButton11">начать с начала</button>
</div>
<div class="buton1">
  <br>
  <br>
  <center>
    <br>
    <button type="button" onclick="goTo('http://www.yandex.ru')" class="myButton11"> Вернуться в главное меню</button>
  </center>
</div>

<script>
  var countQuest = 0;
  var plus = 0;
  var test_start = 0;

  function check(num) {

    if (num == 2) {

      document.getElementById('area').style.display = 'block'; //
      document.getElementById('start').style.display = 'none';
      document.getElementById('end').style.display = 'inline';

      if (test_start == 0) {

        //Массив вопросов
        var questions = ["1. Вы состоялись как  специалистом в определенной области, возможно, даже не в одной. Вас ценят/ценили на работе.", "2. У вас периодически возникают идеи, чем бы можно было заняться. Вы их не реализуете, а позднее вы видите, что их реализовал кто-то другой.", "3. У вас есть собственные успехи в том деле, которым  вы планируете заниматься/занимаетесь", "4. Вы не можете представить себе жизнь без развития и работы над собой"];

        //Массивы вариантов ответов
        var number1 = ["ДА", "ДА", "ДА", "ДА"];
        var number2 = ["НЕТ", "НЕТ", "НЕТ", "НЕТ"];

       ...

CSS

body {
  background: url(http://s2.uploads.ru/t/5elYM.jpg)
}

.myButton12 {
  color: #524E49;
  background: #fdeaa8;
  padding: 10px;
  font-size: 20px;
  border-radius: 5px;
  box-shadow: 0px 1px 3px;
  position: relative;
  box-sizing: border-box;
  transition: all 500ms ease-out;
}

.myButton12:hover {
  box-shadow: 0px 0px 0px 2px #f90914, 0px 0px 0px 7px #a7f9c9, 0px 0px 0px 9px #f90914, 0px 0px 5px 10px #ff4d00;
}

.myButton11 {
  color: #524E49;
  background: #fdeaa8;
  padding: 10px;
  font-size: 20px;
  border-radius: 5px;
  box-shadow: 0px 1px 3px;
}

.myButton11:hover {
  background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8, #777);
}

.wrapper {
  width: 700px;
  height: 100px;
  margin: 0 auto;
  display: none;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.buton1 {
  position: absolute;
  bottom: 80px;
  right: 100px;
  line-height: 1px;
}

.buton2 {
  position: absolute;
  bottom: 80px;
  left: 100px;
  line-height: 1px;
}