JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  <main class="container">
  <section id="riots-to-renaissance"><section class="quiz fade-in" aria-live="polite"><div class="progress"><p class="counter"><span>Question 1 of 7</span></p><div class="progress-bar" style="width: 14.2857%;"></div></div><div class="question-container"><img class="img-fluid" src="https://interactive.wttw.com/sites/default/files/dusable-to-obama_raisin-in-the-sun.jpg" alt="Characters in A Raisin in the Sun"><p class="question"><span><em>A Raisin in the Sun</em> was the first play by an African-American woman to be produced on Broadway. Who was the playwright?</span></p><form><div class="option"><input id="radio-0" type="radio" name="option" value="true"><label for="radio-0"><span>Lorraine Hansberry</span></label></div><div class="option"><input id="radio-1" type="radio" name="option" value="false"><label for="radio-1"><span>Gwendolyn Brooks</span></label></div><div class="option"><input id="radio-2" type="radio" name="option" value="false"><label for="radio-2"><span>Maya Angelou</span></label></div></form><div class="bottom"><button type="button" disabled="">Check answer</button></div></div></section></section>
</main>


  



    <script>
      var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@keyframes roll-in {
  0% {
    top: 10px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  animation: pulse 1s infinite;
}
.fade-in {
  animation: fade .75s ease;
}
.quiz {
  margin: 2em auto;
  min-height: 40vh;
  font-size: 16px;
}
.quiz .progress {
  position: relative;
  transition: width .4s ease;
  margin-bottom: 1em;
  background: #b5b5b5;
  border-radius: 0;
  width: 100%;
  height: 2em;
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
}
.quiz .progress .progress-bar {
  background-color: #1d77cc;
}
.quiz .progress .counter {
  position: absolute;
  right: 5px;
  top: 0;
  font-weight: normal;
  color: #fff;
  height: 100%;
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
  font-size: 1.25em;
  margin: auto .5em;
  letter-spacing: .025em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quiz form {
  width: 90%;
  margin: 1.5em auto;
}
.quiz .img-fluid {
  margin: 2em auto;
  max-width: 360px;
  display: block;
}
.quiz .question {
  font-weight: bold;
  line-height: 1.35;
  margin-bottom: .75em;
}
.quiz .option {
  margin-bottom: .25em;
  transition: all .25s ease;
  font-size: .9em;
}
.quiz button {
  padding: .75em;
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
  background-color: #1d77cc;
  border: 0;
  color: #fff;
  font-size: 1em;
  transition: .25s all;
  white-space: nowrap;
  font-weight: bold;
  cursor: pointer;
}
.quiz button i {
  margin-left: .15em;
}
.quiz button:disabled {
  opacity: .5;
}
.quiz input[type="radio"]:checked,
.quiz input[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.quiz input[type="radio"]:checked +...