JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>Retro Custom Audio Player</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <style type="text/css"> 
        @font-face { 
            font-family: pixel; 
            src: url('fonts/PixelOperator.ttf') format('truetype'); 
            font-size: normal; 
            font-weight: normal; 
        } 
        body { 
            background-color: transparent; 
            color: #ffffff; 
            font-family: pixel;
            margin: 0;
            padding: 0;
        } 
        .audio-player { 
            width: 690px; 
            background-color: #bac0fe; 
            border: 2px solid #565db9; 
            padding: 5px; 
        } 
        .track-title { 
            font-size: 14px; 
            font-weight: bold; 
            color: #000000; 
            border: 1px solid #ffffff; 
            padding: 5px; 
            background-color: #ffffff; 
            font-family: pixel; 
        } 
        .controls { 
            white-space: nowrap; 
        } 
        .icon-btn { 
            background: none; 
            border: none; 
            padding: 0; 
            margin: 0 5px;
            vertical-align: middle; 
            cursor: pointer;
        } 
        .status-bar { 
            font-size: 14px; 
            color: #000000; 
            text-transform: uppercase; 
            white-space: nowrap; 
            font-family: pixel; 
            margin-right: 10px;
        } 
    </style> 
</head> 
<body> 

    <div class="audio-player"> 
        <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
            <tr> 
                <td valign="middle" width="1" style="padding-right: 15px;"> 
                    <div class="controls"> 
                        <button type="button" class="icon-btn"...