JSFiddle - React, Tailwind, and code Playground

by buzz868

HTML

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Ahmed's Clock</title>

    <link rel="stylesheet" href="clock.css">


<body>
    <div class="clock">
        <!-- the clock hands -->
        <div class="hourhand"></div>
        <div class="minhand"></div>
        <div class="sechand"></div>

        <!-- the litte dots between each number-->
        <div class="dots dot1">.</div>
        <div class="dots dot2">.</div>
        <div class="dots dot3">.</div>
        <div class="dots dot4">.</div>
        <div class="dots dot5">.</div>
        <div class="dots dot6">.</div>
        <div class="dots dot7">.</div>
        <div class="dots dot8">.</div>
        <div class="dots dot9">.</div>
        <div class="dots dot10">.</div>



        <!-- the 12 numbers of the clock-->
        <div class="numbers no1">1</div>
        <div class="numbers no2">2</div>
        <div class="numbers no3">3</div>
        <div class="numbers no12">12</div>

    </div>
    <!-- the javascript file used in this project -->
    <script src="clock.js"></script>
</body>
</html>

CSS

**#css**

* { margin: 0; padding: 0; box-sizing: border-box;}

body { 

display: flex; 

justify-content:center; 

width: 100%

}


.clock {

    display: flex;

    justify-content: center;

    width: 490px;

    height: 490px;

    border: 10px solid #76AA9E;

    border-radius: 50%;

    margin: 180px auto 20px auto;

    text-align: center;
}

.numbers {

    position: absolute;

    width: 100px;

    height: 463px;

    font-size: 1.5em;

    font-weight: bold;

}

.dots {

    text-align: center;
    width: 100px;
    height: 460px;
    position: absolute;
}

dot1 { transform: rotate(6deg);}

.dot2 { transform: rotate(12deg);}

.dot3 { transform: rotate(18deg);}

.dot4 { transform: rotate(24deg);}

.dot5 { transform: rotate(30deg);}

/* the numbers */

.no1 { transform: rotate(30deg);}

.no2 { transform: rotate(60deg);}

.no3 { transform: rotate(90deg);}