Skip to content

Clocks

Analog and digital clocks.

2 component(s)

World Clock Widget – Tailwind CSS clocks preview

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.

Tailwind CSS 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

What is a clock widget?

A clock widget displays the current time on a web page, either as an analog clock face with hour, minute and second hands or as a digital readout. Clocks are used on dashboards, world-time panels, kiosk screens, personal start pages and as decorative elements in portfolios and CSS showcases.

When to use an analog or digital clock

Use a digital clock when people need to read the exact time quickly, for example in admin dashboards or time-zone lists. Use an analog clock when the look matters, such as decorative headers, creative portfolios or learning tools. Many examples here are also a good way to study CSS transforms and JavaScript timing.

Best practices for a CSS and JavaScript clock:

  • Read the time from Date on every tick rather than adding one second to a stored value; this keeps the clock in sync.
  • Use Intl.DateTimeFormat to display local formats and other time zones correctly.
  • Rotate analog hands with CSS transform: rotate() and a transform-origin at the pivot point.
  • Use requestAnimationFrame or a one-second interval and stop updates when the element is not visible if performance matters.
  • Provide the time as text for assistive technology, for example with a <time> element or an aria-label, and avoid live announcements every second.
  • Respect prefers-reduced-motion for sweeping second hands.
  • Use tabular numerals so digital digits do not jump.

Bootstrap, Tailwind CSS and pure CSS clocks

Every clock comes with a live preview and code tabs for HTML, CSS and JS. Bootstrap 6 versions use the new alpha ES module build and theme-* colour roles so the face adapts to light and dark modes. Bootstrap 5 and Tailwind CSS versions wrap the clock in familiar cards and utilities, and pure CSS versions show what plain CSS and a few lines of vanilla JavaScript can do. Filter by framework, copy or download the code and adjust size, colours and time zone.