JSFiddle - React, Tailwind, and code Playground
by Craig Martin
HTML
<link type="text/css" rel="stylesheet" title="stylemode_default" href="https://www.hollywoodtechshop.com/wp-content/uploads/series_chapter_transcripts/stylemode_default.css"/>
<link rel="stylesheet" type="text/css" href="https://www.hollywoodtechshop.com/wp-content/uploads/series_chapter_transcripts/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="https://www.hollywoodtechshop.com/wp-content/uploads/series_chapter_transcripts/css/demo.css" />
<link rel="stylesheet" type="text/css" href="https://www.hollywoodtechshop.com/wp-content/uploads/series_chapter_transcripts/css/component.css" />
<script src="https://www.hollywoodtechshop.com/wp-content/uploads/series_chapter_transcripts/js/modernizr.custom.js"></script>
<h1 id="tracktitle" onclick="playAudio();"></h1>
<div id="transcriptWrapper">
<ul id="transcript">
</ul>
</div>
<div id="chapter1start" style="display:none;">
<div class="cue-group">
<div class="cue-group-start-offset">
00:00
</div>
<div class="cues">
<div class="cue" role="button" tabindex="0" start-offset="750">
The Joe Rogan experience
</div>
</div>
</div>
<div class="cue-group">
<div class="cue-group-start-offset">
00:03
</div>
<div class="cues">
<div class="cue" role="button" tabindex="0" start-offset="3210">
are you aware at all of the current
</div>
</div>
</div>
<div class="cue-group">
<div class="cue-group-start-offset">
00:06
</div>
<div class="cues">
<div class="cue active" role="button" tabindex="0" start-offset="6029">
state of surveillance and what if
</div>
</div>
</div>
<div class="cue-group">
<div class="cue-group-start-offset">
00:08
</div>
<div class="cues">
<div class="cue" role="button" tabindex="0" start-offset="8639">
anything has changed since your
</div>
</div>
...