JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<div class="menu">
<a href="odkaz.html" id="a">Odkaz</a>
<a href="odkaz.html" id="b">Odkaz</a>
<a href="odkaz.html" id="c">Odkaz</a>
<a href="odkaz.html" id="d">Odkaz</a>
</div>
<div class="obsah">
</div>

CSS

*{text-decoration: none;}
.menu{
       width: 950px;
       margin: 0 auto;
       padding-top: 10px;
}
#a,#b,#c,#d{

font-size:25px;
       padding: 50px;
       color:white;
       margin-left:25px;
       line-height:175px;
    
}

#a{background-color: #990000;}
#b{background-color: #009900;}
#c{background-color: #000099;}
#d{background-color: #430730;}

#a:hover,#b:hover,#c:hover,#d:hover{

    position:relative;
    top:50px;
    animation:pohyb 1s linear;
    
    -webkit-animation:pohyb 1s linear;    
}
 @keyframes pohyb {0%{top:0px;} 100%{top:50px;}}
 @-webkit-keyframes pohyb {0%{top:0px;} 100%{top:50px;}}