<div id="root"></div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background-color: #f0f0f0;
}

.clock {
  position: relative;
  width: 250px;
  height: 250px;
  border: 10px solid #333;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.hand {
  position: absolute;
  width: 50%;
  height: 6px;
  background-color: #333;
  transform-origin: 100% 50%;
  top: calc(50% - 3px);
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.05s ease-in-out;
}

.hour {
  height: 6px;
  background-color: #000;
  width: 30%;
  left: 20%;
}

.minute {
  height: 6px;
  width: 40%;
  left: 10%;
  background-color: #a5a0a0;
}

.second {
  height: 2px;
  width: 45%;
  left: 5%;
  background-color: red;
}

.time {
  margin-top: 20px;
  font-size: 24px;
  font-family: "Arial", sans-serif;
  color: #333;
}

import React, { useState, useRef, useEffect } from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'

const App = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const hours = time.getHours();
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();

  const secondsRotation = (seconds / 60) * 360;
  const minutesRotation = (minutes / 60) * 360 + (seconds / 60) * 6;
  const hoursRotation =
    ((hours % 12) / 12) * 360 + (minutes / 60) * 30 + (seconds / 3600) * 30;

  return (
    <div className='container'>
      <div className='clock'>
        <div
          className='hand hour'
          style={{ transform: `rotate(${hoursRotation + 90}deg)` }}
        ></div>
        <div
          className='hand minute'
          style={{ transform: `rotate(${minutesRotation + 90}deg)` }}
        ></div>
        <div
          className='hand second'
          style={{ transform: `rotate(${secondsRotation + 90}deg)` }}
        ></div>
      </div>
      <div className='time'>
        <span>{time.toLocaleTimeString()}</span>{" "}
        {/* Display the correct local time */}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"))
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.