JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<!-- ラジオボタンで状態をスイッチさせる -->
<input type="radio" name="status" id="reset" checked="checked"><div>
<input type="radio" name="status" id="start"><div>
<input type="radio" name="status" id="stop"><div>

<div class="stopwatch">

    <!-- ボード -->
    <div class="board"></div>
    
    <!-- 10ミリ秒の輪っかと目盛と数字 -->
    <div class="ticks_10ms">
        <div>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
    </div>
    
    <!-- 1000ミリ秒の輪っかと目盛と数字 -->
    <div class="ticks_1000ms">
        <div>
           ...

CSS

body {
    overflow:hidden;
}

input[name=status]{
    display:none;
}

.stopwatch {
    position:relative;
    margin:40px 0 0;
    width:440px;
    height:440px;
}

.board {
    position:absolute;
    left:20px;
    top:20px;
    width:400px;
    height:400px;
    border-radius:200px;
    -webkit-border-radius:200px;
    -moz-border-radius:200px;
    background:-webkit-gradient(
        radial,
        50% 50.2%, 197,
        50% 50.2%, 200,
        from(rgba(0,0,0,0)),
        to(rgba(0,0,0,0.6))
    );
    background:-moz-radial-gradient(
        50% 50.2%,
        circle,
        rgba(0,0,0,0) 197px,
        rgba(0,0,0,0.6) 200px
    );
}

.ticks_10ms {
    position:absolute;
    left:34px;
    top:34px;
    width:372px;
    height:372px;
}
.ticks_10ms div {
    position:relative;
    width:370px;
    height:370px;
    border-radius:185px;
    -webkit-border-radius:185px;
    -moz-border-radius:185px;
    border:1px solid #555;
}
.ticks_10ms div span {
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    counter-increment:count-10ms;
}
.ticks_10ms div span:before {
    content:"";
    display:block;
    margin:0 auto;
    width:2px;
    height:6px;
    background:#555;
}
.ticks_10ms div span:nth-child(5n):before {
    margin:0 auto;
    height:12px;
}
.ticks_10ms div span:nth-child(10n):before {
    height:15px;
}
.ticks_10ms div span:nth-child(10n):after {
    content:counter(count-10ms);
    display:block;
    text-align:center;
    font-family:Arial, sans-serif;
    font-size:20px;
    font-weight:bold;
    color:#555;
}
.ticks_10ms div span:nth-child(  1){-webkit-transform:rotate(  3.6deg); -moz-transform:rotate(  3.6deg);}
.ticks_10ms div span:nth-child(  2){-webkit-transform:rotate(  7.2deg); -moz-transform:rotate(  7.2deg);}
.ticks_10ms div span:nth-child(  3){-webkit-transform:rotate( 10.8deg); -moz-transform:rotate( 10.8deg);}
.ticks_10ms div span:nth-child(  4){-webkit-transform:rotate( 14.4deg);...