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>
</main>

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 +...

JavaScript

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 (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;} //render raw HTML from question data 
var RawHTML = function RawHTML(props) {return React.createElement('span', { dangerouslySetInnerHTML: { __html: props.html } });};var

QuestionImage = function (_React$Component) {_inherits(QuestionImage, _React$Component);
  function QuestionImage(props) {_classCallCheck(this, QuestionImage);var _this = _possibleConstructorReturn(this, (QuestionImage.__proto__ || Object.getPrototypeOf(QuestionImage)).call(this,
    props));

    _this.imgRef = React.createRef();return _this;
  }_createClass(QuestionImage, [{ key:...