JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<div class="container">
  <ul class="nav">
  
    <li><a href="#1">Link 1</a></li>
    
    <li><a href="#2">Link 2</a></li>
    
    <li><a href="#3">Link 3</a></li>
    
  </ul>
</div>

CSS

:root {
  --sr-annote-color-0: #b4d9fb;
  --sr-annote-color-1: #ffeb3b;
  --sr-annote-color-2: #a2e9f2;
  --sr-annote-color-3: #a1e0ff;
  --sr-annote-color-4: #a8ea68;
  --sr-annote-color-5: #ffb7da;
}

:root {
  --link-underline-color: #234;
  --link-underline-height: 2px;
  --link-underline-transition: 0.33s ease-in;
  --link-underline-hover-color: #123;
  --link-underline-hover-transform: scaleX(1);
}
* {
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-style: normal;
}

body {
  font-family: 'Open Sans',sans-serif;
  font-weight: 300;
  font-size: 14pt;
  color: #035;
  min-height: 100vh;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
}

.nav a, .nav span {
  white-space: nowrap;
}

a {
  color: #234;
  text-decoration: none;
  position: relative;
  transition: 0.33s;
  display: inline-block;
  padding: 0.3em;
  cursor: default;
}

a:hover {
  color: #123;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: var(--link-underline-height, 1px);
  bottom: 0;
  left: 0;
  background-color: var(--link-underline-color, #234);
  visibility: hidden;
  transform: scaleX(0);
  transition: var(--link-underline-transition, 0.5s);
}

a:hover:before {
  visibility: visible;
  background-color: var(--link-underline-hover-color, #123);
  transform: var(--link-underline-hover-transform, scaleX(1));
}

ul.nav {
  display: flex;
  list-style: none;
  gap: 1em;
}

.nav > li {
  display: flex;
  list-style: none;
}

div.container {
  width: 80vw;
  margin: 0 auto;
  padding: 2em 0;
}