JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<div id="header" class="flex center col">
    <div id="identity" class="flex row">
      <h1 id="title">SNOWBLOSSOM</h1>
      <h3 id="subtitle">.info</h3>
    </div>
    <div id="navigation" class="flex row center">
      <div class="nav flex col center"><i class="fa fa-search"></i>Search</div>
      <div class="nav flex col center"><i class="fa fa-users"></i>Community</div>
      <div class="nav flex col center"><i class="fa fa-sitemap"></i>Status</div>
      <div class="nav flex col center"><i class="fa fa-heartbeat"></i>Live</div>
      <div class="nav flex col center"><i class="fa fa-cloud"></i>Pools</div>
      <div class="nav flex col center"><i class="fa fa-donate"></i>Donate</div>
      <div class="nav flex col center"><i class="fa fa-tint"></i>Faucet</div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Sniglet|Raleway|Lato');

html, body {
  margin: 0;
  padding: 0;
  font-family: "Lato";
  /*letter-spacing: 0.05em;*/
}
.flex {
  display: flex;
}
.center {
  justify-content: center;
  align-items: center;
}
.row {
  flex-direction: row;
}
.col {
  flex-direction: column;
}

.red { background-color: salmon; }
.green { background-color: lightgreen; }
.blue { background-color: lightblue; }

#identity {
  
}
#title {
  letter-spacing: 0.2em;
}
#navigation {
  width: 100%;
  background-color: lightblue;
  box-shadow: 0 0 1em rgba(0,0,0, 0.25) inset;
}
.nav {
  /*border: 1px solid black;*/
  border-radius: 0.5em;
  flex: 0 1 auto;
  height: 6em;
  width: 6em;
  margin: 1em;
  background-color: white;
  box-shadow: 0.5em 0.5em rgba(0,0,0,0.1);
  transition: 0.25s;
  color: rgba(0,0,0, 0.75);
  font-size: 0.8em;
  color: black;
}
.nav:hover {
  background-color: rgba(240,240,240, 1);
  box-shadow: 0.4em 0.4em rgba(0,0,0,0.1);
}
.nav:active {
  box-shadow: 0.1em 0.1em rgba(0,0,0,0.1);
  transition: 0.25s;
}
.nav>i {
  font-size: 2em;
  margin-bottom: 0.25em;
}