JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8">
    <title>CSS3 timer</title>
    <link href="style.css" rel="Stylesheet" />
</head>
<body>
    <div class="timerBody">
        <div class="timerFront">
            <a class="start" id="start" href="#start"></a>
            <a class="pause" id="pause" href="#pause"></a>
            <a class="stop" id="stop" href="#stop"></a>
            <div class="timerInner">
                <div class="timerFace">
                    <div class="clock">
                        <div class="line one"></div>
                        <div class="line three"></div>
                        <div class="line five"></div>
                        <div class="arrow"></div>
                    </div>
                    <div class="timer">
                        <div class="numb tenHour">
                        </div>
                        <div class="numb hour">
                        </div>
                        <div class="numb tenMin">
                        </div>
                        <div class="numb min">
                        </div>
                        <div class="numb tenSec">
                        </div>
                        <div class="numb sec">
                        </div>
                        <div>
                            :</div>
                        <div class="numb tenMilisec">
                        </div>
                        <div class="numb milisec">
                        </div>
                    </div>
                </div>
                <div class="timerStek">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

/************************************************************************************RESET
*************************************************************************************/
html, body,*
{
    margin: 0;
    padding: 0;
}
img, fieldset
{
    border: 0;
}
/* set image max width to 100% */
img
{
    max-width: 100% !important;
    height: auto;
    width: auto\9; /* for fucking Ie8 */
}
/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ 
    display: block;
}
/* focus */
a, input[type="submit"], input[type="button"], *:focus
{
    outline: none;
}
table
{
    border-spacing: 0;
}
/************************************************************************************
DEFAULT
*************************************************************************************/
body, html
{
    background: #fff;
    font-family: Arial;
    min-width: 400px;
}
.container
{
    width: 330px;
    margin: 100px auto;
}
/***************** timer design **********************8/

/****** paint body */
.timerBody,.timerFront, .timerInner, .timerFace
{
    border-radius: 100%;
    position: absolute;
}
.timerBody
{
    width: 350px;
    height: 350px;
    position: relative;
    margin: 100px auto 0;
    z-index: 2;
    background: -o-linear-gradient(120deg,#97989a,#ededed);
    background: -ms-linear-gradient(120deg,#97989a,#ededed);
    background: -webkit-linear-gradient(120deg,#97989a,#ededed);
    background: -moz-linear-gradient(120deg,#97989a,#ededed);
}
.timerFront, .timerInner, .timerFace
{
    width: 340px;
    height: 340px;
    top: 5px;
    left: 5px;
    background: -o-linear-gradient(120deg,#dedfe1 5%,#f5f5f5 10%, #9a9a9c 30%, #dddddd 50%, #c2c3c5 60%, #f3f3f3 80%, #cacbcd);
    background: -ms-linear-gradient(120deg,#dedfe1 5%,#f5f5f5 10%, #9a9a9c 30%, #dddddd 50%, #c2c3c5 60%, #f3f3f3 80%, #cacbcd);
    background: -webkit-linear-gradient(120deg,#dedfe1 5%,#f5f5f5 10%, #9a9a9c 30%, #dddddd 50%, #c2c3c5...