JSFiddle - React, Tailwind, and code Playground

HTML

<button id="log-in">Log In</button>
<button id="log-out">Log Out</button>
<div id="length-raw"></div>
<div id="length-seconds"></div>
<div id="length-minutes"></div>
<div id="length-hours"></div>

JavaScript

var logInButton = document.getElementById('log-in');
var logOutButton = document.getElementById('log-out');

var logInTime;
var logOutTime;

var logInLength;
var logInLengthEl = document.getElementById('length-raw');
var seconds;
var secondEl = document.getElementById('length-seconds');
var minutes;
var minutesEl = document.getElementById('length-minutes');
var hours;
var hoursEl = document.getElementById('length-hours');

//Replace click event with real log in event
logInButton.addEventListener("click", function () {
    logInTime = new Date()
})

//Replace click event with real log out event
logOutButton.addEventListener("click", function () {
    logOutTime = new Date()
    logInLength = logOutTime.getTime() - logInTime.getTime();
    seconds = logInLength / 1000;
    minutes = seconds / 60;
    hours = minutes / 60;

    logInLengthEl.innerText = logInLength;
    secondEl.innerHTML = seconds;
    minutesEl.innerHTML = minutes;
    hoursEl.innerHTML = hours;
})