JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="main_menu">
<li><a href="#">test</a></li>
</ul>

CSS

#main_menu a, #main_menu li { 
  -webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
 } /*Hover animation */

#main_menu li:hover { background: #4488CC;  border-style: dotted; border-color: blue }

#main_menu li {
        /*GRAPHICS*/
    list-style: none;
    border: 3px outset red;
    margin: 10px;
    background: #333;
}