JSFiddle - React, Tailwind, and code Playground

by Yuli Satriani

HTML

<nav class='nav'>
  <ul class='nav_list'>
    <li class='nav_menu'><b>List 1</b>
      <ul class='nav_menu-lists nav_menu--1-lists'>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 1</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 1</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 1</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 1</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 1</b></a></li>
      </ul>
    </a></li>
    <li class='nav_menu'><b>List 2</b>
      <ul class='nav_menu-lists nav_menu--2-lists'>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 2</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 2</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 2</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 2</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 2</b></a></li>
      </ul>
    </a></li>
    <li class='nav_menu'><b>List 3</b>
      <ul class='nav_menu-lists nav_menu--3-lists'>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 3</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 3</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 3</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 3</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 3</b></a></li>
      </ul>
    </a></li>
    <li class='nav_menu'><b>List 4</b>
      <ul class='nav_menu-lists nav_menu--4-lists'>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 4</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 4</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List 4</b></a></li>
        <li class='nav_menu-items'><a href='Link Kalian'><b>List...

CSS

<style type='text/css'>
*,*:before,*:after{box-sizing:inherit;margin:0;padding:0;}
nav ul{list-style-type:none;}
.nav{margin-top:30px;text-align:center;width:100%;}
.nav_list{display:inline-block;}
.nav_menu{float:left;width:140px;height:65px;line-height:65px;text-transform:uppercase;background-color:#2c8fb5;cursor:pointer;}
.nav_menu:hover{background-color:#226f8c;}
.nav_menu:hover > .nav_menu-lists li{display:block;}
.nav_menu:hover > .nav_menu--1-lists li:nth-child(1){opacity:0;-webkit-animation:menu1 ease-in-out forwards;animation:menu1 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:0ms;animation-delay:0ms;}
@-webkit-keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
@keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
.nav_menu:hover > .nav_menu--1-lists li:nth-child(2){opacity:0;-webkit-animation:menu1 ease-in-out forwards;animation:menu1 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:150ms;animation-delay:150ms;}
@keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
.nav_menu:hover > .nav_menu--1-lists li:nth-child(3){opacity:0;-webkit-animation:menu1 ease-in-out forwards;animation:menu1 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:300ms;animation-delay:300ms;}
@keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
.nav_menu:hover > .nav_menu--1-lists li:nth-child(4){opacity:0;-webkit-animation:menu1 ease-in-out forwards;animation:menu1...