JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="container">
    <a href="#container">start</a>
<div id="stage">
    <div id="lane1" class="lane">
        <i class="note"></i>
    </div>
    <div id="lane2" class="lane">
        <i class="note"></i>
    </div>
    <div id="lane3" class="lane">
        <i class="note"></i>
    </div>
</div>
<div id="controller">
    <button type="button" id="button1"></button>
    <button type="button" id="button2"></button>
    <button type="button" id="button3"></button>
</div>
</div>

CSS

body, html { 
    background:#000;
}

*, ::before, ::after {
    -webkit-box-sizing:border-box;
}
button {
    -webkit-appearance:none;
}


#container {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

#controller {
    position:absolute;
    bottom:0;
    left:50px;
    width:105px;
    border-top:solid 3px red;
    overflow:hidden;
}

#controller button {
    width:35px;
    height:70px;
    display:block;
    float:left;
}

#stage {
    width:105px;
    position:absolute;
    top:0;
    left:50px;
    bottom:70px;
    border:solid 1px #999;
}

#stage .lane {
    width:35px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    border-right:solid 1px #999;
}
#stage .lane:nth-child(2){
    left:35px;
}
#stage .lane:nth-child(3){
    left:70px;
    border:0;
}

.note {
    display:block;
    width:35px;
    height:5px;
    background:#fff;
    position:absolute;
    top:0;
    left:0;
}

#lane1 .note {
    -webkit-animation-duration:4s;
}

#container:target #lane1 .note{
    -webkit-animation-name:lane1-note1;
    -webkit-animation-timing-function:liner;
}

@-webkit-keyframes lane1-note1 {
    0% {
    -webkit-transform:translate(0, 0);
    }
    100% {
    -webkit-transform:translate(0, 280px);
    }
}