$ tz = web.form(tz="America/Los_Angeles").tz
$ now = web.now(tz)

<form>
<select name=tz>
$for available_tz in pendulum.timezones:
    <option value=$available_tz\
    $if tz == available_tz:
         selected\
    >$available_tz
<select>
<button>Update</button>
</form>

<p id=date>$now.format('dddd, MMMM D, YYYY')</p>
<p id=clock>$now.format('HH:mm:ss')<span>$now.format('.SSSSSS')</span></p>

<style>
#date { font-size: 1.5em; margin: 0; }
#clock { font-family: monospace; font-size: 3em; margin: 0; }
#clock span { color: #586e75; font-size: .75em; }
</style>

<script>
function updateClock() {
  const date = new Date()
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  const milliseconds = date.getMilliseconds()
  document.getElementById('date').innerHTML = date.toLocaleDateString('en-US', {
    weekday: 'long', month: 'long', day: 'numeric', year: 'numeric'
  })
  document.getElementById('clock').innerHTML =
    `$${hours}:$${minutes}:$${seconds}<span>.$${milliseconds}</span>`
}
updateClock()
setInterval(updateClock, 250)
</script>