Skip to content

World Clock Widget

Tailwind CSS world clock with live digital times for six cities, day and night cards, time differences, a 12h/24h switch and the Intl API.

Also known as: multiple time zones clock, time zone converter display, city clocks

Tailwind CSS Clocks Responsive #card #clock #responsive #time #widget

World Clock Widget live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

A world clock widget built with Tailwind CSS and the browser's Intl API. It shows live digital clocks for six cities, with the date, the time difference to the visitor's own zone, a day-progress bar and cards that switch between a light day style and a dark night style. It suits team dashboards, remote-work pages, support contact pages and travel apps.

How it works

The root is .twc-clock. Each city is an article.twc-card inside a responsive grid (one column, two from sm, three from lg) and carries an IANA zone name in data-twc-tz, for example Asia/Tokyo. Inside the card the script fills data-twc-time (a time element with a datetime value), data-twc-sec, data-twc-ampm, data-twc-date, data-twc-offset and the data-twc-bar progress line.

On DOMContentLoaded the script reads the visitor's time zone with Intl.DateTimeFormat().resolvedOptions() and writes it into data-twc-local. A loop aligned to the start of every second uses formatToParts to get the wall-clock time in each zone, calculates its UTC offset, and labels the date as Today, Tomorrow or Yesterday compared with the visitor. It also sets data-twc-period to day or night; Tailwind's data-[twc-period=night]: and group-data-[twc-period=night]: variants then swap the card to indigo and replace the sun icon with a moon. The .twc-bar in style.css is scaled with transform: scaleX() to the share of the day that has passed. Without JavaScript the cards still show city names with --:-- placeholders.

Customization

  • data-twc-tz on each .twc-card: change the city by entering any IANA time zone (e.g. America/Sao_Paulo) and update the heading and country text.
  • DAY_START and NIGHT_START at the top of script.js: set the hours when cards switch between day and night styles.
  • aria-pressed="true" on the data-twc-format="12" button: make the 12-hour format the default.
  • data-[twc-period=night]:bg-indigo-950 on .twc-card: pick another night color, such as slate-900; bg-amber-400 on the bar sets the day accent.
  • sm:grid-cols-2 lg:grid-cols-3 on the ul: show four cards per row with lg:grid-cols-4.
  • text-4xl sm:text-5xl on data-twc-time: enlarge or shrink the digits.

Use cases

  • Remote team dashboards: six city clocks show each teammate's local time and difference to yours
  • Support contact pages: day and night card styles show at a glance who is likely online
  • Travel apps: Today, Tomorrow or Yesterday labels clarify dates in other time zones
  • Global businesses: visitors switch between 12-hour and 24-hour formats

Accessibility

Each card is an article named by its city heading through aria-labelledby. Times use the time element with a machine-readable datetime. The ticking seconds are aria-hidden and nothing is placed in a live region, so screen readers are not interrupted every second. The 12h/24h control is a role="group" of buttons with aria-pressed, keyboard operable and with a visible amber focus ring. Sun and moon icons are decorative and hidden. The bar transition is disabled under prefers-reduced-motion.

Usage notes

The chosen format is remembered with localStorage inside a try/catch, so the widget also works where storage is blocked. Several .twc-clock blocks can share a page if their heading id values are unique.

World Clock Widget at a glance

Framework
Tailwind CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Tailwind CSS
Layout
Responsive, works on mobile
Category
Clocks
License
Free for personal and commercial use

Questions about this template

Can I use the World Clock Widget code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Tailwind CSS from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

  • <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.

World Clock Widget – Tailwind CSS clocks component screenshot
World Clock Widget · Tailwind CSS Clocks

More Clocks

Live Analog Clock – Pure CSS clocks preview

Live Analog Clock

Live analog clock with CSS-rotated hands, conic-gradient ticks, a digital readout and optional time zone support, in pure CSS and vanilla JS.

Pure CSS Clocks