JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<script src="jquery.js"></script>
<script>
    $(document).ready(function(){
        ctx = document.getElementById('can').getContext('2d');
        analog();
    });
    function analog(){            
        ctx.clearRect(0,0,150,150);
        ctx.translate(150,150);  
        ctx.scale(0.4,0.4);
        ctx.beginPath();  
        ctx.lineWidth = 14;  
        ctx.strokeStyle = '#325FA2';  
        ctx.arc(0,0,142,0,Math.PI*2,true);  
        ctx.stroke();    
        ctx.rotate(-Math.PI/2);  
        ctx.strokeStyle = "black";  
        ctx.lineWidth = 8;  
        ctx.lineCap = "round";
        ctx.save();  
        for(var i = 0 ; i < 12 ; i++){  
            ctx.beginPath();  
            ctx.rotate(Math.PI/6);  
            ctx.moveTo(100,0);  
            ctx.lineTo(120,0);  
            ctx.stroke();  
        } 
        ctx.restore();             
        ctx.save();  
        ctx.lineWidth = 2;  
        for (i = 0;i < 60 ; i++){  
            if (i % 5 != 0) {  
                ctx.beginPath();  
                ctx.moveTo(110,0);  
                ctx.lineTo(102,0);  
                ctx.stroke();  
            }  
            ctx.rotate(Math.PI/30);  
        }      
        ctx.restore(); 
        setInterval(clock,1000);
    }  
    function clock(){      
        var now = new Date(); 
        var sec = now.getSeconds();  
        var mins = now.getMinutes();  
        var hr  = now.getHours();  
        hr = hr >= 12 ? hr-12 : hr;  
        ctx.save();  
        ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*mins + (Math.PI/21600)*sec ) 
        ctx.strokeStyle = "black";    
        ctx.lineWidth = 16;  
        ctx.beginPath();  
        ctx.moveTo(-20,0);  
        ctx.lineTo(60,0);  
        ctx.stroke();
        ctx.restore();
        ctx.save();  
        ctx.rotate( (Math.PI/30)*mins + (Math.PI/1800)*sec )  
        ctx.strokeStyle = "red";         
        ctx.lineWidth = 10;  
        ctx.beginPath();  
        ctx.moveTo(-28,0);  
       ...