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 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.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head> 
<body> 

<div data-role="page" id="homepage">
    <div data-role="header" data-position="fixed"> 
        <h1>Page One</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true">
      <li><a href="#slider_page">Voorzetsels</a></li>
      <li><a id="ww" href="#wwSlider" >Werkwoorden</a></li>
    </ul>
    
    </div>
    <div id="ads" class="center">


    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>



<div data-role="page" id="slider_page">
    <div data-role="header" data-position="fixed"> 
        <h1>Page One</h1>
        <a id="back" href="#homepage" data-role="button" data-icon="back" data-iconpos="left" >Back</a>
    </div>
   <div data-role="content" class="center"> 
      <div id="sliderplek" >
          <input type="range" name="slider" id="vz_slider" value="20" min="10" max="100" step="5" data-highlight="true" />
      </div>
      <input type="submit" value="Begin" data-inline="true" />
      
      
   </div>
   <div>
   
   </div>
   
    <div data-role="footer" data-position="fixed">
    </div>
</div>

<div data-role="page" id="oefen_page">
    <div data-role="header" data-position="fixed">
        <h1>Page Two</h1>
        <a id="back" href="#homepage" data-role="button" data-icon="back" data-iconpos="left" >Back</a>
    </div>
    <div data-role="content">    
        <div id="partituur"></div>
<div id="antwoord" class="center...

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;    
}
.cafe {
    font-family: "café & brewery";
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .ui-btn-text {
    font-size: 1em; /* Play with font size of the text */
}
}

.one_em {
    font-size: 1em;
}
.two_em {
    font-size: 2em;
}
.three_em {
    font-size: 3em;
}
.four_em {
    font-size: 4em;
}

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 goAds = ads()
        $('#homepage').bind('pageshow', function() {
            location.reload();
        });

/*$(document).on('pageinit', '#homepage',  function(){
            //if (percentageTeller !== 0) {
            alert("het werkt");
            //location.reload(); 
            
            //}
        });*/










        $('[type="submit"]').bind("click", function() {
            aantal = $('#vz_slider').val();
            $.mobile.changePage('#oefen_page');
            return false;
        });


/*$(function () {
      $('#back').live('click', function () {
          $(this).formReset();
          return false;
      });
 
      $('#back').live('click', function () {
          $(this).resetValidation();
      });
})
*/

        /// 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 fouteAntwoorden = new Array();
        var percentageTeller = 0;
        var antwoordenAnswers = new Array();
        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",...