JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div class="nav"></div>
<div class="nav"></div>
<div class="a"></div>
<div class="b"></div>

CSS

body
    {
      background: #8BE;
    }
.nav
    {
      border: 2px solid black;
      background: white;
      width: 30%;
      min-height: 200px;
      margin-top: 45px;
      margin-left: 25px;
    }
 .a
    {
      position: absolute;
      right: 15px;
      top: 45px;
      height: 45px;
      width: 55%;
      border: 2px solid black;
      background: white;
      z-index: 1;
    }
 .b
    {
      position: absolute;
      right: 15px;
      top: 45px;
      height: 45px;
      width: 55%;
      border: 2px solid red;
      background: white;
      z-index: 0;
      overflow: hidden;
    }
  .a:hover + .b, .b:hover
    {
      animation-name: moov, high;
      animation-duration: 3s, .49s;
      animation-delay: 0s, 3s;
      animation-fill-mode: forwards;  
      animation-timing-function: linear;
    }
@keyframes moov
    {
      0%
          {
            height: 45px;            
          }
    100%
          {
            height: 345px;            
          }
    }
@keyframes high
    {
      0%
          {
            top: 45px;            
          }
    100%
          {
            top: 94px;            
          }
    }