JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

<div class="times">
  <!-- India's Time -->
  <div class="clock">
    <div class="clock-time" data-timezone="Asia/Kolkata"></div>
    <div class="clock-name">Hyderabad</div>
  </div>
  
  <!-- London's Time -->
  <div class="clock">
    <div class="clock-time" data-timezone="Europe/London">  </div>
    <div class="clock-name">London</div>
  </div>

  <!-- New York's Time -->
  <div class="clock">
    <div class="clock-time" data-timezone="America/New_York"></div>
    <div class="clock-name">New York</div>
  </div>
</div>

CSS

body{
  font-family: 'Lato', sans-serif;
}
.times{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.clock {
   width: 150px;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
}
.clock-name{
  font-size: 25px;
  display: flex;
}
.clock-time{
  font-weight: 600;
}

JavaScript

const clocks = document.getElementsByClassName("clock-time");

function updateClocks() {
  for (let clock of clocks) {
    let timezone = clock.dataset.timezone;
    let time = new Date().toLocaleTimeString("en-US", {
      hour: '2-digit',
      minute:'2-digit',
      second:'2-digit',
      timeZone: timezone
    });
    clock.textContent = time;
  }
}

// Update every second:
setInterval(updateClocks, 1000);
updateClocks();