JSFiddle - React, Tailwind, and code Playground

by Vyacheslav Yashnikov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<div id="app">

</div>

CSS

.test-header {
  color: #242424;
font-size: 22px;
font-family: 'stolzl',Arial,sans-serif;
line-height: 1.55;
font-weight: 700;
background-position: center center;
border-color: transparent;
border-style: solid;
margin-bottom: 40px;
}

.question-card {
  padding: 20px;
  display: none;
}


.question-card label {
  color: #242424;
font-size: 20px;
display: block;
padding-top: 2px;
margin-bottom: 5px;
padding-bottom: 5px;
font-family: 'stolzl',Arial,sans-serif;
line-height: 1.55em;
font-weight: 400;
background-position: center center;
border-color: transparent;
border-style: solid;
position: relative;
padding-left: 40px;
}

.question-card label:after {
  content: '';
  border: 2px solid #cca44c;
  position: absolute;
  top: 0;
  height: 25px;
  width: 25px;
  left: 0;
  border-radius: 50%;
}

.question-card input[type="radio"]:checked ~ label:before {
  content: '';
  background: #cca44c;
  position: absolute;
  border-radius: 50%;
  -moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.question-card input[type="radio"] {
  display: none;
}

.question-card input[type="radio"] ~ label:before {
  content: '';
  background: transparent;
  position: absolute;
  top: 5px;
  height: 19px;
  width: 19px;
  left: 5px;
  border-radius: 50%;
  -webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
-moz-transform: scale(.5);
-webkit-transform: scale(.5);
-o-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
}


.question-card button {
  color: #ffffff;
font-size: 14px;
font-family: 'stolzl',Arial,sans-serif;
line-height: 1.55;
font-weight: 600;
min-width: 200px;
height: 55px;
border-width: 1px;
border-radius: 30px;
background-color: #cca44c;
background-position: center center;
border-color: transparent;
border-style: solid;
transition: background-color 0.2s ease-in-out, color 0.2s...

JavaScript

var...