JSFiddle - React, Tailwind, and code Playground

by ChrisP

HTML

<div id="section_title">
    Section 1 of 4
</div>
<div id="menubar">
    <button class="menuitem">Mark</button>
    <button class="menuitem">Review</button>
    <button class="menuitem">Back</button>
    <button class="menuitem">Continue</button>
</div>
<div id="timer">
    <button id="btn_hide_timer">Hide Timer</button>&nbsp;&nbsp;
    Time:&nbsp;<span id="time">10:33</span>
</div>
<div id="questionInfo">
    <b>Number <span id="qnum">4</span> of 20</b>
</div>
<hr>
<div id="content">
    Lorem ipsum dolor sit amet.  This is the content here.
    The quick brown fox jumped over the lazy dog.
</div>
    
<div id="footer">
    Click to select your choices.
</div>

CSS

body {
    font-family: Helvetica;
}
#menubar {
    text-align: right;
    padding: 12px;
}
#section_title {
    position: absolute;
    padding: 20px;
    font-size: 12pt;
}
#content {
    width: 85%;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
}
#timer {
    text-align: right;
    font-size: 10pt;
    padding-right: 14px;
    margin-top: 5px;
}
button.menuitem {
    font-size: 14px;
    min-width: 80px;
    min-height: 40px;
    background: -webkit-linear-gradient(top, #ffffff 0%, #e3e3e3 100%);
    border-radius: 5px;
    border: 1px solid gray;
}
button.menuitem:active {
    border: 1px solid black;
}
#questionInfo {
    width: 100%;
    text-align: center;
    font-size: 10pt;
}
hr {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-top: 8px;
    margin-bottom: 8px;
}
#footer {
    position: absolute;
    top: 95%;
    height: 4%;
    font-size: 9pt;
    text-align: center;
    width: 100%;
}

JavaScript

var time = 20*60;

function testTimer()
{
    time = time - 1;
    document.getElementById("time").innerHTML = time;
}

var timer = setInterval( function () { testTimer() }, 1000);
                                       $("#btn_hide_timer").click(function () { 
    $("#time").toggle();
    this.innerHTML = "Show Timer";
});