JSFiddle - React, Tailwind, and code Playground

by David Joseph Guzsik

HTML

<script src="https://kit.fontawesome.com/156a2a4e63.js"></script>
<nav class="navbar">
  <span class="navbar-brand">Portfolio</span>
  <label class="navbar-toggle" for="menu-check">
    <i class="fa fa-bars"></i>
  </label>
  <input type="checkbox" id="menu-check" class="navbar-menu-checkbox">
  <ul class="navbar-menu">
    <li><a href="?menu=about">About</a></li>
    <li><a href="?menu=webdev">Web Development</a></li>
    <li><a href="?menu=videos">Video Editing</a></li>
    <li><a href="?menu=contact">Contact</a></li>
  </ul>
</nav>

<div class="space">
<span>Content</span>
</div>

CSS

:root {
  --navbar-height: 65px;
  --navbar-brand-height-ratio: .75;
  --navbar-brand-spacing: .5rem;
  --navbar-item-height-ratio-desktop: .25;

  --navbar-menu-darkness-mobile: .9;
  --navbar-item-height-mobile: 2.25rem;
  --navbar-item-padding-ratio-mobile: .2;
  --navbar-item-spacing-mobile: .75rem;

  --navbar-item-spacing-desktop: .35rem;

  --navbar-item-border-roundness: .25em;

  --navbar-slide-animation-speed: .25s;
  --navbar-item-hover-animation-speed: .15s;
  --navbar-resize-speed: .1s;


  /*  calculated */
  --navbar-brand-height: calc(var(--navbar-height) * var(--navbar-brand-height-ratio));
  --navbar-item-font-size-mobile: calc(var(--navbar-item-height-mobile) * (1 - var(--navbar-item-mobile-padding-ratio)));
  --navbar-item-font-size-desktop: calc(var(--navbar-height) * var(--navbar-item-height-ratio-desktop));
  --navbar-item-padding-mobile: calc(var(--navbar-item-height-mobile) * var(--navbar-item-padding-ratio-mobile));
  --navbar-item-height-desktop: calc(var(--navbar-height) * var(--navbar-item-height-ratio-desktop));
}

@media (min-width: 650px) {
  :root {
    --navbar-height: 80px;
  }
}

body,
html {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.navbar {
  display: flex;
  background: #0080ff;
  padding: .5rem 1.5rem;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: var(--navbar-height);
  text-transform: uppercase;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  transition-property: height;
  transition-duration: var(--navbar-resize-speed);
  transition-timing-function: ease-in-out;
}

.navbar,
.navbar a {
  color: #fff;
}

.navbar-brand {
  font-size: var(--navbar-brand-height);
  line-height: 1;
  font-weight: bold;
  transition-property: font-size;
  transition-duration: var(--navbar-resize-speed);
  transition-timing-function: ease-in-out;
}

.navbar-toggle {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: var(--navbar-brand-height);
 ...