Equipo repartido
Hora local de cada oficina
- Madrid--:--Referencia
- Nueva York--:--
- Tokio--:--
Three city world clocks
Three analog dials with the real time in each city and a sweeping second hand; at night the dial turns dark.
Settings
Code
<section class="uvq07-clk"><header><h3>Distributed team</h3><p>Local time at each office</p></header><ul><li data-tz="Europe/Madrid"><span class="dl" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i><i style="--i:11"></i><b class="h"></b><b class="m"></b><b class="s"></b></span><span class="nm">Madrid</span><span class="dg">--:--</span><span class="of">Reference</span></li><li data-tz="America/New_York"><span class="dl" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i><i style="--i:11"></i><b class="h"></b><b class="m"></b><b class="s"></b></span><span class="nm">New York</span><span class="dg">--:--</span><span class="of"> </span></li><li data-tz="Asia/Tokyo"><span class="dl" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i><i style="--i:11"></i><b class="h"></b><b class="m"></b><b class="s"></b></span><span class="nm">Tokyo</span><span class="dg">--:--</span><span class="of"> </span></li></ul></section>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
Distributed teams live between time zones, and analog dials make the gap obvious at a glance. Each face here reads the real time through Intl.DateTimeFormat, moves its hands with a smooth sweep, shows the digital time and the offset from the first city, and switches to a dark dial between eight in the evening and seven in the morning. Good for team pages, travel and meeting tools.
The main color is the bezel and second hand, the second the night dial and hands. Change the cities and time zones in the list; any IANA zone works.