JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Resources</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CSS

html { background:linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,0), rgba(0,0,0,.75)) center / cover, url(http://layoutsourcing.net/tmp/death.jpg) center / cover; height:100%; font-family:verdana; }
ul { display:inline-block; margin:1em; padding:0; list-style:none; }
li { position:relative; background:rgba(100, 100, 100, .5); transition:background .25s; }
li:hover { background:rgba(100, 100, 100, .75); cursor:pointer; }
li a { display:block; margin:0 0 1px 0; padding:.5em 3em .5em 1em; color:#fff; text-decoration:none; transition:padding .25s; }
li:last-child a { border-bottom:0; }
li:hover a { padding:.5em 2.75em .5em 1.25em; }
li:before, li a:before, li a:after { content:"›"; position:absolute; top:0; right:.5em; padding:.5em 0; color:#fff; pointer-events:none; }
li a:before { right:.75em; }
li a:after { right:1em; }
li:hover:before, li:hover a:before, li:hover a:after { color:#f90; animation:colorfade .75s reverse infinite; }
li:hover a:before { animation-delay:-.25s; }
li:hover a:after { animation-delay:-.5s; }


@keyframes colorfade { from { color:#fff; } to { color:#f90; } }