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>

<h1>LOGO</h1>

CSS

* { margin:0; padding:0; }
html { font-family:verdana, sans-serif; padding:2em; }
h1 { float:left; font-size:9em; line-height:.94; /*background:#ccc;*/ }
ul { float:left; list-style:none; transition:margin 1s; }
li { }
li a { display:block; padding:.25em 1em; text-decoration:none; color:inherit; }
html:hover ul { margin:0 -4em 0 0; transition:margin 1s; }
html ul li a { color:rgba(127,127,127,.05); text-shadow:0 0 1em #000; }
html:hover ul li a:hover, html ul li a:focus { color:rgba(0,0,0,1); text-shadow:0 0 0 #000; transition:color 1s, text-shadow .5s; }
html ul li a:focus { margin-right:3em; }
html:hover ul:hover { margin:0 0 0 0; transition:margin 1s; }