Analog Clock - Copy this React, Tailwind Component to your project

Build a functional analog clock using HTML, CSS, and JavaScript. The clock should display the current time with a black and white color scheme, using minimalistic design principles. The clock should have hour, minute, and second hands, and should update in real time. Features: Analog Clock Design: Create an analog clock with a circular face. The clock should have hour, minute, and second hands. The clock should use a black background with white hands and markers for a clean, minimalist aesthetic. Real Time Functionality: The clock should update the position of the hour, minute, and second hands dynamically to reflect the current time. CSS Styling: Use CSS to style the clock face and hands. Implement smooth transitions or animations for the movement of the clock hands. The clock face should be centered on the page with appropriate margins. JavaScript Logic: Use JavaScript to get the current time (hour, minute, second) and dynamically adjust the positions of the clock hands. Ensure that the hands move smoothly as time progresses (e.g., seconds should move every second, minutes every minute, etc.). Optional Enhancements: Add tick marks around the clock face to represent hours and minutes. Include a 12 hour format and optionally a 24 hour format. Implement an auto updating feature where the clock hands are always aligned with the actual current time. Structure: HTML: A <div> for the clock face. Separate <div>s for each hand (hour, minute, second). Basic structure for the clock container. CSS: Styles for the clock face (circle), clock hands (positioning, rotation, and size). Black background for the clock face, white for the clock hands and markers. Center the clock on the screen. Smooth transitions for hands' movement. JavaScript: setInterval or requestAnimationFrame for real time updates. Functions to get the current time and calculate the angles for each hand. Rotate the hands based on the current time.