JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-Hour Analog Clock</title>
<style>
  body, html { margin:0; height:100%; display:flex; justify-content:center; align-items:center; background:#111; }
  .clock {
    width: 300px; height: 300px; border: 12px solid #444; border-radius: 50%;
    position: relative; background: #222; box-shadow: 0 0 20px rgba(0,0,0,0.8);
  }
  .hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; }
  .hour-hand   { width: 8px; height: 35%; background: #aaa; margin-left: -4px; }
  .minute-hand { width: 6px; height: 45%; background: #ccc; margin-left: -3px; }
  .second-hand { width: 2px; height: 48%; background: #f66; margin-left: -1px; }
  .center-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%;
                position: absolute; top: 50%; left: 50%; margin: -6px; z-index: 10; }
  .tick {
    position: absolute; width: 2px; height: 20px; background: #888;
    top: 10px; left: 50%; margin-left: -1px; transform-origin: center 140px;
  }
  .number {
    position: absolute; font: bold 18px Arial; color: #ddd; text-align: center;
    width: 30px; height: 30px; top: 20px; left: 50%; margin-left: -15px;
    transform-origin: center 130px;
  }
</style>
</head>
<body>

<div class="clock" id="clock">
  <div class="center-dot"></div>
</div>

<script>
const HOUR_COUNT = 13;
const ANGLE_PER_HOUR = 360 / HOUR_COUNT; // ≈27.692307°

const clock = document.getElementById('clock');

// Create 13 ticks
for (let i = 0; i < HOUR_COUNT; i++) {
  const tick = document.createElement('div');
  tick.className = 'tick';
  tick.style.transform = `rotate(${i * ANGLE_PER_HOUR}deg)`;
  clock.appendChild(tick);
}

// Create 13 hour numbers (1–13)
for (let i = 0; i < HOUR_COUNT; i++) {
  const num = document.createElement('div');
  num.className = 'number';
  num.textContent = (i + 1);
  num.style.transform = `rotate(${i * ANGLE_PER_HOUR}deg)`;
 ...