JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="background: red; width:60%">
			<div class="clock-wrap">
				<section>
					<div class="display"></div>
					<div class="hourhand-container">
						<div class="hourhand"></div>
					</div>
					<div class="minutehand-container">
						<div class="minutehand"></div>
					</div>
					<div class="secondhand-container">
						<div class="secondhand"></div>
					</div>
					<div class="center-dot"></div>
					<div class="hour12"></div>
					<div class="hour1"></div>
					<div class="hour2"></div>
					<div class="hour3"></div>
					<div class="hour4"></div>
					<div class="hour5"></div>
				</section>
			</div>
		</div>

CSS

.clock-wrap {
            overflow: hidden; 
            position: relative; 
            width: 100%; 
            padding-bottom: 100%;
        }
		
		section {
			width: 100%;
			height: 100%;
			background: #000;
			border-radius: 50%;
			position: absolute;
			z-index: 1;
		}

		.label {
			position: absolute;
			top: 19vmin;
			left: 46%;
			font-size: 2.5vmin;
		}

		.hourhand,
		.secondhand,
		.minutehand {
			height: 100%;
			background: #000;
			z-index: 2;
		}

		.hourhand:after,
		.secondhand:after,
		.minutehand:after {
			content: '';
			background: #000;
			width: 20%;
			height: 100%;
			z-index: 3;
			position: absolute;
			top: 0;
			left: -20%;
		}

		.hourhand-container {
			width: 100%;
			height: 2%;
			position: absolute;
			top: 49%;
		}
				
		.hourhand {
			border-top-right-radius: 20%;
			border-bottom-right-radius: 20%;
			box-shadow: -10px 0px 10px rgba(0,0,0,.4);
			width:30%;
			left: 50%;
			position: relative;
			z-index: 2;
		}
		
		.minutehand-container {
			width: 100%;
			height: 2%;
			position: absolute;
			top: 49%;
		}

		.minutehand {
			width: 40%;
			height: 100%;
			top: 0%;
			border-top-right-radius: 30%;
			border-bottom-right-radius: 30%;
			box-shadow: -10px 10px 10px rgba(0,0,0,.4);
			left: 50%;
			position: relative;
			z-index: 3;
		}

		.secondhand-container {
			width: 100%;
			height: 2%;
			position: absolute;
			top: 49%;
		}
		
		.secondhand {
			width: 45%;
			height: 40%;
			top: 30%;
			box-shadow: -10px -10px 10px rgba(0,0,0,.4);
			position: relative;
			left: 50%;
			z-index: 4;
		}
		
		.hour12, .hour1, .hour2, .hour3, .hour4, .hour5 {
			width: 90%;
			height: 1%;
			top: 49.5%;
			position: absolute;
			left: 5%;
		}
		
		.hour12:after, .hour1:after, .hour2:after, .hour3:after, .hour4:after, .hour5:after {
			content: "";
			width: 8%;
			background: black;
			height: 100%;
			position: absolute;
			left: 0;
		}
		
		.hour12:before, .hour1:before, .hour2:before, .hour3:before, .hour4:before,...

JavaScript

const hourhand = $(".hourhand-container");
			const minutehand = $(".minutehand-container");
			const secondhand = $(".secondhand-container");
	   
			function tick() {
			   var date = new Date();
			   var seconds = date.getSeconds();
			   var minutes = date.getMinutes();
			   var hours = date.getHours();
			   
			   var secAngle = seconds * 6 - 90;
			   var minAngle = minutes * 6 + seconds * (360/3600) - 90;
			   var hourAngle = hours * 30 + minutes * (360/720) - 90;
			   
			   secondhand.css('transform', 'rotate(' + secAngle + 'deg)');
			   minutehand.css('transform', 'rotate(' + minAngle + 'deg)');
			   hourhand.css('transform', 'rotate(' + hourAngle + 'deg)');
			}

			setInterval(tick, 1000);