JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <title>Tony Chow</title>
</header>

<body>
  <div class="header">
    Hi, I'm
    <em>Tony Chow</em>
  </div>
  <div class="nav-boxes">
    <span>
        <a href="/blog" class="box" style="color:white; text-decoration:none;">blog</a>
      </span>
    <span>
        <a href="/tech" class="box" style="color:white; text-decoration:none;">tech</a>
      </span>
    <span>
      <a href="/art" class="box" style="color:white; text-decoration:none;">art</a>
      </span>
  </div>
  <div class="about">
    <p>
      I'm a Math Major, Neural Net Researcher
      <br> & Origami Enthusiast
      <a href="http://www.utah.edu/" class="utah"> @University of Utah</a>
    </p>
  </div>
  <div class="social-profile">
    <p>
      <a href="mailto:[email protected]">
        <i class="fa fa-envelope fa-2x"></i>
      </a>
      <a href="https://www.linkedin.com/pub/tony-chow/85/2b4/252">
        <i class="fa fa-linkedin-square fa-2x"></i>
      </a>
      <a href="https://github.com/suigentoo">
        <i class="fa fa-github-square fa-2x"></i>
      </a>
      <a href="https://twitter.com/suigentoo">
        <i class="fa fa-twitter-square fa-2x"></i>
      </a>
    </p>
  </div>
</body>

CSS

body {
  text-align: center;
}

.header {
  font-family: "Open Sans";
  font-size: 30px;
  padding: 180px 0px 60px 0px;
}

.nav-boxes {
  padding: 0px 0px 30px 0px;
}

.box {
  position: relative;
  display: inline-block;
  margin: 20px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  font-size: 10pt;
  letter-spacing: 1pt;
  text-transform: uppercase;
  background-color: #0077BB;
  line-height: 100px;
}

.box:hover {
  background-color: #FF4747;
}

.about {
  font-family: "Open Sans";
  font-size: 15px;
  line-height: 2;
  padding: 0px 0px 30px
}

a.utah {
  color: #FF4747;
}

.social-profile p a {
  text-decoration: none;
}

a {
  color: #0077BB;
}

a:hover {
  color: #FF4747;
}

.fa {
  margin: 0px 0.3em;
}