JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="hover" data-hover="4">4</div>
<div class="hover" data-hover="3">3</div>
<div class="hover" data-hover="2">2</div>
<div class="hover" data-hover="1">1</div>
<div class="hover" data-hover="0">0</div>

<div class="container">
  <div class="inner-body">
  <h1 data-hover="4" style="background: red;">04</h1>
    <h1 data-hover="3" style="background: red;">03</h1>
    <h1 data-hover="2" style="background: blue;">02</h1>
    <h1 data-hover="1" style="background: yellow;">01</h1>
    <h1 data-hover="0" style="background: pink;">00</h1>
  </div>
</div>
<div class="container" style="top: 200px;">
  <div class="inner-body">
  <h1 data-hover="4">04</h1>
    <h1 data-hover="3">03</h1>
    <h1 data-hover="2">02</h1>
    <h1 data-hover="1">01</h1>
    <h1 data-hover="0">00</h1>
  </div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.hover {
  width: 100%;
  height: 20px;
  background: purple;
}
div.container {
  position: absolute;
  width: 36px;
  height: 76px;
  overflow: hidden;
}
div.container div.inner-body {
  position: absolute;
  bottom: 0;
  transition: 1s cubic-bezier(0.65, 0.01, 0, 1.43);
}
h1 {
  margin: 0;
  padding: 21.4px 0;
}

JavaScript

$('.hover').on('mouseover',function(){
	var textHeight = $('h1').innerHeight();
  var getIndex = $(this).attr('data-hover');
  $('.inner-body').css({
  	transform : 'translateY(' + (getIndex * textHeight) + 'px)'
  })
})