Analog clock

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com/"></script>
    <title>analogclock v1.0.1</title>
</head>

<body>

    <style>
        #secondHand, #minuteHand, #hourHand {
            transition: transform 1s linear;
        }
    </style>

    <!-- clock -->
    <div id="clock"
        class="mx-auto relative flex items-center justify-center size-[200px] m-2 rounded-full border-[1px] border-black">

        <div id="centerDot" class="absolute size-[8px]">
            <div class="size-[8px] bg-black rounded-full"></div>
        </div>

        <div id="minuteHand" class="absolute h-[150px] w-[3px]">
            <div class="h-[75px] w-[3px] bg-black rounded-full"></div>
        </div>

        <div id="hourHand" class="absolute h-[100px] w-[5px]">
            <div class="h-[50px] w-[5px] bg-black rounded-full"></div>
        </div>

        <div id="secondHand" class="absolute h-[180px] w-[1px]">
            <div class="h-[90px] w-[1px] bg-black rounded-full"></div>
        </div>

    </div>

    <script>
        function updateClock() {
            const d = new Date();
            const sec = d.getSeconds();
            const hour = d.getHours();
            const mins = d.getMinutes();

            hourHand.style.transform = `rotate(${360 / 12 * hour + 360 / 12 / 60 * mins}deg)`
            minuteHand.style.transform = `rotate(${360 / 60 * mins + 360 / 60 / 60 * sec}deg)`
            secondHand.style.transform = `rotate(${360 / 60 * sec}deg)`
        }

        updateClock()
        setInterval(updateClock, 1000)
    </script>
</body>

</html>