JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>

  </head>

  <body>
    <div id="container">
      <span id="displayTime">00:00:00</span>
      <span id="checkOddEven">TEST</span>
    </div>

    <script src="script.js">
      /* Connect to External JS */

    </script>
  </body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  --neongreen: #48ff00;
  --biru: rgb(0, 132, 255);
  --merah: rgb(255, 22, 22);
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: rgb(8, 8, 22);
  font-family: 'Bebas Neue', sans-serif;
}

#container {
  display: grid;
  place-items: center;
  color: var(--neongreen);
  text-shadow: 0 0 5vh var(--neongreen);
  background-color: rgb(5, 5, 5);
  padding: 1.5vh 5vh 1.5vh 5vh;
  border-radius: 25px;
  border: 1vh solid;
  transition: border-color 0.5s ease;
  border-color: none;
}

#displayTime {
  font-size: 12vh;
}

#checkOddEven {
  font-size: 4vh;
}

JavaScript

// Jalankan fungsi clock() setiap 1000 milisekon (1 detik)
setInterval(clock, 1000);

let displayTime = document.getElementById("displayTime");
let timeContainer = document.getElementById("container");
let checkOddEven = document.getElementById("checkOddEven");

function clock() {
  let date = new Date();
  displayTime.innerHTML = date.toLocaleTimeString(undefined, {
    hour12: false
  });
  if (date.getSeconds() % 2 == 0) {
    timeContainer.style.borderColor = "var(--merah)";
    checkOddEven.innerHTML = "GENAP";
  } else {
    timeContainer.style.borderColor = "var(--biru)";
    checkOddEven.innerHTML = "GANJIL";
  }
}