JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<ul id="clock">	
    
	   	<li id="sec">
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="220px"
        height="220px" viewBox="0 0 220 220" enable-background="new 0 0 220 220" xml:space="preserve">
        <g id="Layer_1" display="none">
        <circle display="inline" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="110" cy="110" r="107.377"/>
        </g>
        <g id="Layer_4" display="none">
        <g display="inline">
        <circle fill="#74CCE5" cx="110" cy="110" r="103.279"/>
        <circle fill="#00A9D3" cx="110" cy="15.617" r="5.896"/>
        </g>
        </g>
        <g id="Layer_3" display="none">
        <g display="inline">
        <circle fill="#00A9D3" cx="110" cy="110" r="85.248"/>
        <circle fill="#0085AC" cx="110" cy="34.648" r="5.896"/>
        </g>
        </g>
        <g id="Layer_2">
        <g>
        <circle fill="#0085AC" cx="110" cy="110" r="65.668"/>
        <circle cx="110" cy="110" r="45.992"/>
        <circle fill="#74CCE5" cx="110" cy="55.227" r="5.896"/>
        </g>
        </g>
        </svg>
        </li>
        
	   	<li id="hour">
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="220px"
        height="220px" viewBox="0 0 220 220" enable-background="new 0 0 220 220" xml:space="preserve">
        <g id="Layer_1" display="none">
        <circle display="inline" stroke="#333333" stroke-width="3" stroke-miterlimit="10" cx="110" cy="110" r="107.377"/>
        </g>
        <g id="Layer_4" display="none">
        <g display="inline">
        <circle fill="#74CCE5" cx="110" cy="110" r="103.279"/>
        <circle fill="#00A9D3" cx="110" cy="15.617" r="5.896"/>
        </g>
        </g>
        <g id="Layer_3">
        <g>
        <circle fill="#00A9D3" cx="110" cy="110" r="85.248"/>
        <circle fill="#0085AC" cx="110" cy="34.648" r="5.896"/>
        </g>
       ...

CSS

body{
			background-color:#000;
			font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
		}
		
        * {
        	margin: 0;
        	padding: 0;
        }
        
        #clock {
        	position: relative;
        	width: 220px;
        	height: 220px;
        	margin: 20px auto 0 auto;
        	list-style: none;
        	}
        
        #sec, #min, #hour {
        	position: absolute;
        	width: 220px;
        	height: 220px;
        	top: 0px;
        	left: 0px;
        	}
        
        #sec {
        	z-index: 3;
           	}
           
        #min {
        	z-index: 1;
           	}
           
        #hour {
        	z-index: 2;
           	}
           	
        p {
            text-align: center; 
            padding: 30px 0 0 0;
			font-size:11px;
			color:#09F;
            }
			
		#mydiv{
			font-size:11px;
			color:#fff;
		}

JavaScript

$(function() {
         
              setInterval( function() {
              var seconds = new Date().getSeconds();
              var sdegree = seconds * 6;
              var srotate = "rotate(" + sdegree + "deg)";
              
              $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
                  
              }, 1000 );
              
         
              setInterval( function() {
              var hours = new Date().getHours();
              var mins = new Date().getMinutes();
              var hdegree = hours * 30 + (mins / 2);
              var hrotate = "rotate(" + hdegree + "deg)";
              
              $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
                  
              }, 1000 );
        
        
              setInterval( function() {
              var mins = new Date().getMinutes();
              var mdegree = mins * 6;
              var mrotate = "rotate(" + mdegree + "deg)";
              
              $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
                  
              }, 1000 );
         
        });