JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block" id="wave">
      <span class="line" id="lines">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">
        <a href="#" class="circle" title="Подсказка"></a>
      </span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
      <span class="line">-</span>
    </div>

CSS

body {
  background-color: rgba(0,0,0,.3);
}
.block {
  background-color: rgba(0,0,0,.7);
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.line {
  color: white;
  display: block;
  font-size: 18px;
  text-align: center;
  transform: translate(0px);
  width: 100%;
}
.circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border:1px solid #ff9c5d;
  display: inline-block;
  transition: .3s linear;
}
.circle:hover {
  background-color: #ff9c5d;
}

JavaScript

(function(){
   let wave = document.querySelector('#wave'),
       line = document.querySelectorAll('.line');
       wave.addEventListener('mousemove',function(e){
         
         for(let i = 0;i<line.length;i++){
           line[i].addEventListener('mousemove',mouseMove);
           line[i].addEventListener('mouseout',mouseOut);
          }
          function mouseMove(e){
            let pageX = e.screenX;
            //  let pos = this.style.transform ;
             let x = pageX - 103;
             this.style.transform = 'translate(' + x + 'px)';
             if(this.nextElementSibling != null) {
              this.nextElementSibling.style.transform = 'translate(' + (x / 2) + 'px)';
             }
             if(this.previousElementSibling != null) {
              this.previousElementSibling.style.transform = 'translate(' + (x / 2) + 'px)';
             }
            
          }
          function mouseOut(e){
            this.style.transform = '';
            if(this.nextElementSibling != null) {
              this.nextElementSibling.style.transform = '';
             }
            if(this.previousElementSibling != null) {
              this.previousElementSibling.style.transform = '';
             }
          }
          
        })
    // let wave = $('#wave'),
    //     line = $('#lines');
    //   wave.on('mousemove',function(e){
    //    let elem = $(e.target);
    //    let x = e.pageX - 103;
    //    console.log(elem);
    //    if(elem.hasClass('line')){
    //      elem.on('mouseover',function(){
    //         // elem.css('transform','translate('+ x +'px, 0px');
    //         elem.css({'transform':'translate('+ x +'px, 0px'});
    //       });
    //    }
    //     // elem.on('mouseout',function(){
    //       // elem.animate({'transform':'translate(0px, 0px'})

    //     // })
    //   })

  })();