JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>
        <a href="#">PokaĹĽ</a>
        <div></div>
    </li>
</ul>

SCSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    padding: 2em;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); 
    }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); 
    } 
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); 
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); 
  } 
}

.menu {
    > li {
        position: relative;
   
        > a {
            text-decoration: none;
            display: block;
            padding: 10px 15px;
            
            &:hover + div {
                display: block;
            }
        }
        
        > div {
            position: absolute;
            top: 100%; left: 0;
            width: 300px;
            height: 100px;
            background-color: #666;
            display: none;
             -webkit-animation: fadeInUp 0.3s forwards;
            animation: fadeInUp 0.3s forwards; 
        }
    }
}