JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery Mobile Web App</title>
<link href="layout pebble.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="myscript2.js"></script>
</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header" data-position="fixed"> 
        <h1>Page One</h1>
    </div>
    <div data-role="content" class="center">
      <div id="sliderplek" >
          <input type="range" name="slider" id="slider1" value="5" min="0" max="100" step="1" data-highlight="true" />
      </div>
      <a href="#page2" data-inline="true" data-role="button">Begin</a>
      
      
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header" data-position="fixed">
        <h1>Page Two</h1>
        <a href="#page" data-rel="back" data-role="button" data-icon="back" data-iconpos="left">Back</a>
    </div>
    <div data-role="content">    
        <div id="partituur"></div>
<div id="antwoord"></div>
<div id="buttons">
  <div data-role="controlgroup" data-type="horizontal">
    <button id="derde">Derde</button>
    <button id="vierde">Vierde</button>
    <button id="keuze">Keuze</button>
  </div>
    
</div>
<div id="goedfout">
<div id="goed">
    <embed src="goedfout-01.svg" type="image/svg+xml" width="100px" height="100px" />
</div>
<div id="fout">
    <embed src="goedfout-02.svg" type="image/svg+xml" width="100px" height="100px" />
</div>    
</div>        
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div...

CSS

#partituur {
    font-size: 18px;
}

@font-face {
    font-family: "café & brewery";
    src: url(https://dl.dropbox.com/u/8011739/caf%C3%A9%20%26%20brewery.ttf);
     
    
    /*src: url(https://dl.dropbox.com/u/8011739/caf%C3%A9%20%26%20brewery.ttf) format("truetype");*/
    
    
}

@-webkit-keyframes inout 
{
0%        {background-color: transparent;}
50%        {background-color: #;}
100%    {background-color: transparent;}
}

#goedfout #goed{
    float:left;
    visibility:hidden;
}
#goedfout #fout {
    float:right;
    visibility:hidden;
}

/*#goedfout #goed {
    background-color: #0F0;
    height: 200px;
    width: 200px;
    float: right;
    visibility:hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%
    
}*/

/*#goedfout #fout {
    background-color: #F00;
    height: 200px;
    width: 200px;
    float: left;
    visibility: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%
    
}*/

.center {
    text-align: center;    
}

#antwoord {
    font-family: "café & brewery";
    font-size: 4em;
    text-align: center;
    font-weight: normal;
}
#buttons {
    text-align: center;
}

JavaScript

//<![CDATA[ 


$(function(){
/// first off wrap all our code in our own scope, this means we keep our vars
/// to ourselves and don't mess up anyone elses code - doesn't usually matter
/// with your own app, but good practice is good practice.




(function(){
    /// Hiermee kun je de lengte van je oefening bepalen.
    //var aantal = prompt("Tot hoever wil je oefenen? Geef een nummer op.");
                 
    
    var aantal = $('#slider1').val();
    
    
    
        
    /// might as well store an array with each answer, could be improved
    /// by storing the question as well - so in the end you could give
    /// the user a summary.
    var antwoordenAnswers = [];
    var antwoordenPartituur = 0;  /// store the score count
    var antwoordVerwacht = null; /// keep a reference to the expected answer
    /// reformatted your arrays to better fit with SO layout ;)
    
    
    // all special characters: http://kompoos.nl/manuals/ascii/javascript-special-characters.html
    // \337 = ß
    // \374 = ü
        var vierdeNaamval = [
            "bis", "durch", "f\374r", "gegen",
            "ohne", "um", "entlang"
        ],
        derdeNaamval = [
            "aus", "bei", "mit", "nach", "seit",
            "von", "zu", "entgegen", "au\337er",
            "gegen\374ber", "an...vorbei"
        ],
        keuzevoorzetsel = [
            "an", "auf", "hinter", "neben", "in",
            "\374ber", "unter", "vor", "zwischen"
        ];

    /// added some translation vars for English people 
    /// out there (and to help me)
    var accusative = vierdeNaamval,
        dative = derdeNaamval,
        choicePreposition = keuzevoorzetsel;

    /// to aid with a random choice it's nice to work with arrays
    var opties = [vierdeNaamval, derdeNaamval, keuzevoorzetsel];
    var options = opties;

    /// ... then we can use a function like this to grab a random item
    var getRandomItem = function( a ){
        return a[Math.floor((a.length)*Math.random())];
   ...