JSFiddle - React, Tailwind, and code Playground

HTML

<div class="absolute top-[250px] left-[600px]">
    <div class="text-center">
        <h1 class="text-7xl font-bold text-[#f2f2f2]">00:00:00</h1>
    </div>
    <div class="flex justify-center pt-4">
        <button
          type="button"
          class="bg-[#80a5fc] hover:bg-[#6a89d2] w-24 h-16 mx-2 rounded-lg play"
        >
          Play
        </button>
        <button
          type="button"
          class="bg-[#80a5fc] hover:bg-[#6a89d2] w-24 h-16 mx-2 rounded-lg reset"
        >
          Reset
        </button>
        <button
          type="button"
          class="bg-[#80a5fc] hover:bg-[#6a89d2] w-24 h-16 mx-2 rounded-lg lap"
        >
          Lap
        </button>
     </div>
</div>

JavaScript

const playButton = document.getElementsByClassName("play")[0]
const resetButton = document.getElementsByClassName("reset")[0]
const lapButton = document.getElementsByClassName("lap")[0]

let isPlay = false

const play = () => {
    if (!isPlay) {
        playButton.innerHTML("Pause")
        isPlay = true
    }
    else {
        playButton.innerHTML("Play")
        isPlay = false
    }
}

playButton.addEventListener("click", play)