JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Tauri' rel='stylesheet' type='text/css'>
<div id="nqw_survey">
     <h1>Scooby Doo personality test</h1>

    <p id="nqw_question">Answer just four short questions to find out which Scooby Doo character you're like.<br/>
        <img src="http://blogs.discovermagazine.com/but-not-simpler/files/2014/03/6661567671_f97c0b14ff_o.jpg" /></p>
    <div id="nqw_options">
        <ul id="nqw_start">
            <li><a href="#">Start the test</a></li>
        </ul>
    </div>
</div>

CSS

#nqw_survey {
    text-align: center;
    font-family: 'Tauri', sans-serif;
}
#nqw_survey h1 {
    font-size: 36px;
}

#nqw_options {
	list-style-type: none;	
	padding: 0;
	margin-top: 20px;
}
#nqw_options ul {
    margin: 0;
    padding: 0;
}
#nqw_options li {
	display: block;	
	border: 2px solid #666;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	margin: 0 auto 20px;
	background: rgba(254,254,254,1);
	background: -moz-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(254,254,254,1)), color-stop(49%, rgba(209,209,209,1)), color-stop(50%, rgba(219,219,219,1)), color-stop(100%, rgba(226,226,226,1)));
	background: -webkit-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
	background: -o-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
	background: -ms-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
	background: linear-gradient(to bottom, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e2e2e2', GradientType=0 );
	max-width: 300px;
	vertical-align:top;
	-webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
}
#nqw_options li:hover {
	border-color: #c00;	
}
#nqw_options a {
	display: block;	
	padding: 10px;
	text-decoration: none;
	color: #000;
}

#nqw_start li {
	background: rgba(248,80,50,1);
	background: -moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1)...

JavaScript

var nqw_questions = [
    "What's your favourite food?",
    "What would you do if your phone went missing?",
    "What's your favourite way to travel?",
    "What was your favourite monster?"];

var nqw_answers = [
    [
        "Countess Hagula's Youth Juice",
        "Gummy Dummies",
        "Scooby Snacks"],
    [
        "Phone the police",
        "Start looking for clues", ],
    [
        "Sin Cara's convertible",
        "Loch Ness Monster Machine",
        "Mystery Machine",
        "Cherry 59 Starfire Special"], 
    [
        "Miner Forty-Niner",
        "10,000 Volt Ghost",
        "Maid Mummy"], 
];

var nqw_scores = [
    [
    0,
    1,
    2],
    [
    1,
    0],
    [
    1,
    2,
    2,
    0],
    [
    1,
    2,
    0], 
];

var nqw_qCount = 0;
var nqw_score = 0;

$('#nqw_start').click(function () {
    nqw_score = 0;
    showQuestion();
});

$('#nqw_options').on('click', 'a', function (event) {
    if(typeof $(this).data("score") !== 'undefined') {
        // Standard question options
        nqw_score += $(this).data("score");
        nqw_qCount++;
        if (nqw_qCount < nqw_answers.length) {
            showQuestion();
        } else {
            showOutcome(nqw_score);
        }
    } else {
        // Share buttons, etc
        if($(this).data("action")) {
            if($(this).data("action") == "restart") {
                    location.reload();
            } 
        }
    }
});

function showOutcome(s) {
    if(s >= 5) {
        nqw_outTitle = "Scooby Doo";
        nqw_outDesc = "one cool cat, or should that be dog?";
        nqw_outPic = "http://lorempixel.com/output/animals-q-c-300-200-8.jpg";
    } else if(s >= 3) {
        nqw_outTitle = "Shaggy";
        nqw_outDesc = "a laid back surfer dude!";
        nqw_outPic = "http://lorempixel.com/output/sports-q-c-300-200-2.jpg";
    } else {
        nqw_outTitle = "Fred";
        nqw_outDesc = "the slightly square leader of the crew.";
        nqw_outPic =...