JSFiddle - React, Tailwind, and code Playground

by Phil Button

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>
      101Drums
    </title>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" media="all" href="css/main.css">
    <link type="text/css" rel="stylesheet" media="screen and (orientation: portrait)" href="css/main.css">
    <link type="text/css" rel="stylesheet" media="screen and (orientation: landscape)" href="css/mainLandscape.css">
    <link type="text/css" rel="stylesheet" media="screen and (device-width: 1600px)" href="css/laptop.css">
    <link type="text/css" rel="stylesheet" media="screen and (device-width: 1920px)" href="css/mac.css">
    <link type="text/css" rel="stylesheet" media="screen and (device-width: 600px) and (orientation: portrait)" href="css/tabletPortrait.css">
    <link type="text/css" rel="stylesheet" media="screen and (device-width: 960px) and (orientation: landscape)" href="css/tabletLandscape.css">
    <link type="text/css" rel="stylesheet" media="screen and (device-width: 360px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="css/phonePortrait.css">
    <link type="text/css" rel="stylesheet" media="screen and (device-width: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="css/phoneLandscape.css">
  </head>

  <body onload="getLesson()">
  </body>
  <div id="div1" class="header">
    <div id="div2">
      <a href="http://www.tomvincent.me.uk/"><img id="vincentlogo" src="jpg/logo.jpg" alt="Tom Vincent"></a>
    </div>
    <div id="div3">
      <a href="http://www.101drums.com/"><img id="pnglogo" src="jpg/101logo.jpg" alt="101Drums"></a>
    </div>
  </div>
  <div id="div1" class="numberCategory">
    <span id="lessonNumber"></span><span id="category"></span>
  </div>
  <div id="div1" class="score">
    <img id="lessonScore" src="" alt="Score">
  </div>
  <div id="div1" class="audio">
    <audio id="lessonTrack" controls onended="onEndBehaviour()" onkeypress="">
      <source id="mp3" src="" type="audio/mpeg">
      <source...

JavaScript

// Reading Exercises
var lesson1 = {
  number: "1",
  title: "Quarter Notes",
  score: "scores/01_quarternotes.jpg",
  trackmp3: "tracks/mp3/01_quarternotes.mp3",
  trackogg: "tracks/ogg/01_quarternotes.ogg"
};
var lesson2 = {
  number: "2",
  title: "8th Notes",
  score: "scores/03_8thnotes.jpg",
  trackmp3: "tracks/mp3/03_8thnotes.mp3",
  trackogg: "tracks/ogg/03_8thnotes.ogg"
};
var lesson3 = {
  number: "3",
  title: "8th Notes 2",
  score: "scores/54_8thnotes2.jpg",
  trackmp3: "tracks/mp3/54_8thnotes2.mp3",
  trackogg: "tracks/ogg/54_8thnotes2.ogg"
};
var lesson4 = {
  number: "4",
  title: "16th Notes",
  score: "scores/08_16thnotes.jpg",
  trackmp3: "tracks/mp3/08_16thnotes.mp3",
  trackogg: "tracks/ogg/08_16thnotes.ogg"
};
var lesson5 = {
  number: "5",
  title: "8th and 16th Notes 1",
  score: "scores/11_8thand16thnotes1.jpg",
  trackmp3: "tracks/mp3/11_8thand16thnotes1.mp3",
  trackogg: "tracks/ogg/11_8thand16thnotes1.ogg"
};
var lesson6 = {
  number: "6",
  title: "8th and 16th Notes 2",
  score: "scores/13_8thand16thnotes2.jpg",
  trackmp3: "tracks/mp3/13_8thand16thnotes2.mp3",
  trackogg: "tracks/ogg/13_8thand16thnotes2.ogg"
};
var lesson7 = {
  number: "7",
  title: "8th and 16th Notes 3",
  score: "scores/15_8thand16thnotes3.jpg",
  trackmp3: "tracks/mp3/15_8thand16thnotes3.mp3",
  trackogg: "tracks/ogg/15_8thand16thnotes3.ogg"
};
var lesson8 = {
  number: "8",
  title: "Upbeats",
  score: "scores/17_upbeats.jpg",
  trackmp3: "tracks/mp3/17_upbeats.mp3",
  trackogg: "tracks/ogg/17_upbeats.ogg"
};
var lesson9 = {
  number: "9",
  title: "Triplets",
  score: "scores/19_triplets.jpg",
  trackmp3: "tracks/mp3/19_triplets.mp3",
  trackogg: "tracks/ogg/19_triplets.ogg"
};
var lesson10 = {
  number: "10",
  title: "Triplet Figures 1",
  score: "scores/44_tripletfigures1.jpg",
  trackmp3: "tracks/mp3/44_tripletfigures.mp3",
  trackogg: "tracks/ogg/44_tripletfigures.ogg"
};
var lesson11 = {
  number: "11",
  title: "16th Note Figures 1",
  score:...