JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div id="center">
  <div id="header">
    <div id="navigation">
      <a href=""><i class="fas fa-question"></i><span>About</span></a>
      <a href=""><i class="fas fa-play"></i><span>Start</span></a>
      <a href=""><i class="fas fa-book"></i><span>Docs</span></a>
      <a href=""><i class="fas fa-chart-line"></i><span>Monitor</span></a>
    </div>
    <a id="title" href="">Snowblossom</a>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poiret+One');

body {
  margin: 0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background-color: black;
}
#center {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: black;
  background-color: rgba(11, 74, 160, 0.2);
}
#header {
  width: 45em;
  margin: 0 auto;
  flex: 0 1 auto;
  display: flex;
  text-align: center;
  color: white;
}
a {
  text-decoration: none;
}

#title {
  font-size: 3em;
  font-family: 'Poiret One', cursive;
  color: rgba(255,255,255,0.4);
  transition: color 0.5s, text-shadow 0.5s;
  position: absolute;
  text-shadow: 0 0 2px white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#navigation {
  flex-direction: column;
  display: block;
  border-right: 1px solid rgba(255,255,255,0.1);
}
#navigation>a {
  display: flex;
  padding: 1em;
  color: rgba(255,255,255, 0.52);
  /*text-shadow: 0 0 0em rgba(255,255,255, 0.25);*/
  transition: color 0.5s, text-shadow 0.5s;
  align-items: center;
}
#header a:hover {
  color: rgba(255,255,255, 0.75);
  /*text-shadow: 0 0 1em rgba(255,255,255, 0.25);*/
  transition: color 0.5s, text-shadow 0.5s;
}
#navigation>a>i {
  font-size: 2em;
}
#navigation>a>span {
  width: 6em;
  display: relative;
}