popup.html

<!DOCTYPE html>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap" rel="stylesheet">
<html>

<head>
    <style>
        button {
            height: 30px;
            width: 300px;
            outline: none;
        }
        h1 {
            font-family: "Source Code Pro", monospace;
            font-size: 30px;
            font-style: normal;
            font-weight: 700;
            letter-spacing: normal;
            line-height: 50px;
            text-align: center;
            color: #171C26;
        }
        #addToWhitelist{

        }
        .timer{
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Awesome Title</h1>
    <button id="addToWhitelist">Add to whitelist</button>
    <button id="clearButton">Clear Whitelist</button>
    <div class="timer" >
        <span class="hours">00</span> : <span class="minutes">00</span> : <span class="seconds">00</span>
    </div>
    <div class="timer-buttons">
        <button id="startButton" class="btn btn-lg btn-success">
            Start
        </button>
        <button id="stopButton" class="btn btn-lg btn-danger">
            Stop
        </button>
        <button id="resetButton" class="btn btn-link btn-block">
            Reset
        </button>
    </div>
    <script src="popup.js"></script>
</body>

</html>