JSFiddle - React, Tailwind, and code Playground

by bobbyrne01

HTML

<div id="playerView">
    <div id="header" class="parentWidth">
        <table class="childWidth">
            <tr>
                <td>
                    <audio id="player" preload="auto" class="childWidth" controls></audio>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="left">
                        <img id="previousTrack" src="../images/previous-24.png" alt="Previous" />
                        <img id="stopTrack" src="../images/stop-24.png" alt="Stop" />
                        <img id="nextTrack" src="../images/next-24.png" alt="Next" />
                    </div>
                    <div class="right">
                        <img id="repeatAll" src="../images/repeatAll-24.png" alt="RepeatAll" />
                        <img id="random" src="../images/random-24.png" alt="Random" />
                    </div>
                </td>
            </tr>
        </table>
        <hr/>
        <table class="parentWidth">
            <tr>
                <td>
                    <input id="search" type="text" class="childWidth" />
                </td>
            </tr>
        </table>
    </div>
    <div id="content">Song 1
        <br/>Song 2
        <br/>Song 3
        <br/>Song 4
        <br/>Song 5
        <br/>Song 6
        <br/>Song 7
        <br/>Song 8
        <br/>Song 9
        <br/>Song 10
        <br/>Song 11
        <br/>Song 12
        <br/>Song 13
        <br/>Song 14
        <br/>Song 15
        <br/>Song 16
        <br/>Song 17
        <br/>Song 18
        <br/>Song 19
        <br/>Song 13
        <br/>Song 20
        <br/>Song 21
        <br/>Song 22
        <br/>Song 23
        <br/>Song 24
        <br/>Song 25
        <br/>Song 26
        <br/>Song 27
        <br/>Song 28
        <br/>Song 29
        <br/>Song 30
        <br/>Song 31
        <br/>Song 32
        <br/>Song 33
        <br/>Song 34
        <br/>Song 35
        <br/>Song 36
        <br/>Song 37
        <br/>Song 38
...

CSS

.childWidth {
    width: 100%;
}
.parentWidth {
    width: 98%;
}
.left {
    float: left;
}
.right {
    float: right;
}
#header {
    background-color: #ccc;
    position: fixed;
}
#content {
    background-color: #aaa;
}