JSFiddle - React, Tailwind, and code Playground

by Danja Wittmann

HTML

<div class="menu">
<ul class="menu1">
<li><a href="#">information</a></li>
<li><a href="#">information</a></li>
<li><a href="#">information</a></li>
<li><a href="#">information</a></li>
<li><a href="#">information</a></li>
<li><a href="#">information</a></li>
</ul>
</div>

CSS

.menu { height: 250px; float: left; width: 485px; }
.main {display: block; margin: -20px auto 0;}
.menu1 ul {display: inline; position: absolute; min-width: 100%;}
.menu1 li { width: 15%; float: left;
border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-ms-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
background: red;border-width: 10px 3px;border-style: solid;border-color: black;

transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
    list-style: none;
}
.menu1 li a { text-align: center;  text-decoration: none;  color: white; display: block;margin-top: 13px; padding-top: 5px; padding-bottom: 5px;  }
.menu1 li:hover {margin-top: 60px;}
.menu1 a:hover  {display: block;padding-top: 84px; margin-top: -65px;  }
.menu1 a:focus {display: block;padding-top: 84px; margin-top: -65px;  }
.menu1 li:focus {margin-top: 60px;}