JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<!-- 切り替えのためのinputと隣り合うdiv -->
<label for="skeleton" onclick>スケルトン</label><input type="checkbox" id="skeleton"><div>
<input type="radio" name="status" id="reset" checked><div>
<input type="radio" name="status" id="start"><div>
<input type="radio" name="status" id="stop"><div>

<!-- ストップウォッチ -->
<section>
    <time><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></time>
    <time><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></time>
    <time><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></time>
    <time><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></time>
    <label for="start" onclick></label>
    <label for="stop" onclick></label>
    <label for="reset" onclick></label>
</section>

</div>
</div>
</div>
</div>

CSS

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

section {
    position:relative;
    display:block;
    width:200px;
    height:120px;
}

/* カバー */
section:before {
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    top:0;
    overflow:hidden;
    display:block;
    width:80px;
    height:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    border-style:solid;
    border-color:rgba(0,0,0,1);
    border-width:50px 100px 50px 20px;
    background-image:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(rgba(0,0,0,0.5)),
            color-stop(0.2, rgba(0,0,0,0.0)),
            color-stop(0.9, rgba(0,0,0,0.0)),
            from(rgba(0,0,0,0.5))
        ),
        -webkit-gradient(
            linear,
            left top,
            right top,
            from(rgba(0,0,0,0.5)),
            color-stop(0.1, rgba(0,0,0,0.0)),
            color-stop(0.98, rgba(0,0,0,0.0)),
            from(rgba(0,0,0,0.5))
        );
    background-image:
        -webkit-linear-gradient(
            top,
            rgba(0,0,0,0.5) 0%,
            rgba(0,0,0,0.0) 20%,
            rgba(0,0,0,0.0) 90%,
            rgba(0,0,0,0.5) 100%
        ),
        -webkit-linear-gradient(
            left,
            rgba(0,0,0,0.5) 0%,
            rgba(0,0,0,0.0) 10%,
            rgba(0,0,0,0.0) 98%,
            rgba(0,0,0,0.5) 100%
        );
    background-image:
        -moz-linear-gradient(
            top,
            rgba(0,0,0,0.5) 0%,
            rgba(0,0,0,0.0) 20%,
            rgba(0,0,0,0.0) 90%,
            rgba(0,0,0,0.5) 100%
        ),
        -moz-linear-gradient(
            left,
            rgba(0,0,0,0.5) 0%,
            rgba(0,0,0,0.0) 10%,
            rgba(0,0,0,0.0) 98%,
            rgba(0,0,0,0.5) 100%
        );
    background-image:
        -ms-linear-gradient(
            top,
            rgba(0,0,0,0.5) 0%,
            rgba(0,0,0,0.0) 20%,
           ...