JSFiddle - React, Tailwind, and code Playground

by ChaseMoskal

HTML

<nav class="nav">
  <a href="./">Home</a>
  <a href="./skills">Skills</a>
  <a href="./about">About</a>
</nav>

CSS

.nav {
  padding:0; margin:0;
  list-style:none;
  background:black;
  border-radius:8px;
  color:white;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}

.nav>a {
  display:inline-block; opacity:0.9;
  padding:3% 6%;
  font-weight:bold; font-family:sans-serif;
  letter-spacing:0.1em; color:inherit;
  text-decoration:none;
}

.nav>a:hover,
.nav>a:focus { opacity:1; text-shadow:0 0 8px rgba(255,255,255,0.4); }
.nav>a:active { opacity:0.8; }