JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slide">
    <header>
        <p id="progress">3/20</p>
        <!-- hfill -->
        <p id="timer">20:00</p>
    </header>
    <div class="question">
        <p id="question">What is 2+2?</p>
        <div class="items">
            <!-- foreach loop in PHP -->
            <div class="item">
                <img src="opencircle.png">
                <p>1781</p>
            </div>
        </div>
    </div>
    <footer>
        <nav>
            <div class="nav" id="back">
                <img src="back.png">
            </div>
            <div class="nav" id="go-to">
                <!-- PHP that takes entered value and shows slide -->
                <img src="go.png">
            </div>
            <div class="nav" id="confirm">
                <img src="confirm.png">
            </div>
            <div class="nav" id="next">
                <img src="next.png">
            </div>
        </nav>
    </footer>
</div>

CSS

img {
    display: block;
}
.slide {
    border: 3px solid black;
    margin: 5% 10%;
    width: 80%;
    height: 100%;
}
header {
    margin: 0;
    height: 10%;
    overflow:auto;
}
header p {
    margin: 0;
    font-size: 300%;
}
#progress {
    float: left;
}
#timer {
    float: right;
}