JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<div class="switch">
        <input type="checkbox" id="switch" class="switch-check">
        <label for="switch" class="switch-label">Check	<span></span>

        </label>
        <div id="layerBall" class="ball"> <a href="#"><small>100 Visit</small></a>

        </div>
        <div id="layerPulse" class="pulse"></div>
        <div class="line"></div>
        <div id="layerBall1" class="ball1"> <a href="#"><small>300 Visits</small></a> 
        </div>
        <div id="layerPulse1" class="pulse1"></div>
        <div class="line1"></div>
        <div id="layerBall2" class="ball2"> <a href="#"><small>10 Visits</small></a> 
        </div>
        <div id="layerPulse2" class="pulse2"></div>
        <div class="line2"></div>
        <div id="layerBall3" class="ball3"> <a href="#"><small>4251 Visits</small></a> 
        </div>
        <div id="layerPulse3" class="pulse3"></div>
        <div class="line3"></div>
        <div id="layerBall4" class="ball4"> <a href="#"><small>1752 Visits</small></a> 
        </div>
        <div id="layerPulse4" class="pulse4"></div>

CSS

body {
    background:#222;
}
/* LINES STYLE with Rotate and Trasform-origin properties */
 .line, .line1, .line2, .line3 {
    background: #2187e7;
    width: 0px;
    height: 1px;
    position:absolute;
    -webkit-transform-origin: 0px;
}
#switch:checked ~ .line {
    top: 270px;
    left: 10px;
    -moz-transform: rotate(-10deg);
    -moz-transform-origin: 60 -2em;
    -moz-animation: move 1s linear forwards;
    -webkit-transform: rotate(-10deg);
    -webkit-animation: move 1s linear forwards;
}
#switch:checked ~ .line1 {
    top: 236px;
    left: 207px;
    -moz-transform: rotate(30deg);
    -moz-transform-origin: 0em 30em;
    -moz-animation: move1 1s 1s linear forwards;
    -webkit-transform: rotate(30deg);
    -webkit-animation: move1 1s 1s linear forwards;
}
#switch:checked ~ .line2 {
    top: 335px;
    left: 380px;
    -moz-transform: rotate(-65deg);
    -moz-transform-origin: 20em -22em;
    -moz-animation: move2 1s 2s linear forwards;
    -webkit-transform: rotate(-65deg);
    -webkit-animation: move2 1s 2s linear forwards;
}
#switch:checked ~ .line3 {
    top: 64px;
    left: 507px;
    -moz-transform: rotate(48deg);
    -moz-transform-origin: 30em 39em;
    -moz-animation: move3 1s 3s linear forwards;
    -webkit-transform: rotate(48deg);
    -webkit-animation: move3 1s 3s linear forwards;
}
.ball, .ball1, .ball2, .ball3, .ball4 {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    z-index: 99;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
}
#switch:checked ~ .ball {
    -webkit-animation: point 0.1s linear forwards;
    -moz-animation: point 0.1s linear forwards;
}
#switch:checked ~ .ball1 {
    -webkit-animation: point 0.1s 0.9s linear forwards;
    -moz-animation: point 0.1s 0.9s linear forwards;
}
#switch:checked ~...