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">
            <a href="/about" class="nav flex col center blue"><i class="fa fa-fw fa-question"></i>About</a>
            <a href="/get-started" class="nav flex col center green"><i class="fa fa-fw fa-play"></i>Get Started</a>
            <a href="/search" class="nav flex col center"><i class="fa fa-fw fa-search"></i>Search</a>
            <!--<a class="nav flex col center"><i class="fa fa-fw fa-users"></i>Community</a>-->
            <a href="/status" class="nav flex col center red"><i class="fa fa-fw fa-thermometer-half"></i>Status</a>
            <!--<a class="nav flex col center"><i class="fa fa-fw fa-heartbeat"></i>Live</a>-->
            <!--<div class="nav flex col center"><i class="fa fa-fw fa-sitemap"></i>Pools</a>-->
            <a href="/donate" class="nav flex col center purple"><i class="fa fa-fw fa-donate"></i>Donate</a>
            <!--<a class="nav flex col center"><i class="fa fa-fw fa-tint"></i>Faucet</a>-->
            <!--<a class="nav flex col center"><i class="fa fa-fw fa-align-justify"></i>Orders</a>-->
        </div>
    </div>
    <div class="flex center row">
        <div id="content" class="">
    <center><h1>Get Started</h1></center>

    <h2>It's easy!</h2>
    <ol>
        <li><a href="https://java.com/en/download/manual.jsp"><i class="fab fa-java fa-fw"></i> Install Java 1.8+ (64 bit)</a></li>
        <li><a href="https://github.com/snowblossomcoin/snowblossom/releases"><i class="fas fa-download fa-fw"></i> Download the latest release zip</a></li>
        <li><i class="fas fa-play fa-fw"></i> Run the node and client</li>
    </ol>

    <hr>

    <h2>Important Links</h2>
    <ul>
        <li><a...

CSS

@import url('https://fonts.googleapis.com/css?family=Sniglet|Raleway|Lato');
@import url('https://use.fontawesome.com/releases/v5.2.0/css/all.css');

* {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    font-family: "Arial";
    /*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; }

#title {
    letter-spacing: 0.2em;
}
#navigation {
    min-width: 100%;
    background-color: lightblue;
    box-shadow: 0 0 1em rgba(0,0,0, 0.25) inset;
    flex-wrap: wrap;
}
.nav {
    /*border: 1px solid black;*/
    border-radius: 0.5em;
    flex: 0 1 auto;
    height: 6em;
    min-width: 6em;
    margin: 1em;
    background-color: white;
    box-shadow: 0.5em 0.5em rgba(0,0,0,0.1);
    color: rgba(0,0,0, 0.75);
    font-size: 0.8em;
    color: black;
}
/*.nav:not(:hover) {
    transition: 0.25s;
}*/
.nav:hover {
    /*background-color: rgba(240,240,240, 1);*/
    box-shadow: 0.2em 0.2em rgba(0,0,0,0.1);
    transition: 0.25s;
}
.nav:active {
    box-shadow: 0.2em 0.2em rgba(0,0,0,0.1) inset;
    transition: 0.25s;
}
.nav>i {
    font-size: 2em;
    margin-bottom: 0.25em;
}
a {
    text-decoration: none;
}
#content {
    max-width: 900px;
    width: 100%;
    padding: 2em;
    word-wrap: break-word;
}
#content a {
    color: #5499C7;
    font-weight: bold;
}
hr {
    border: none;
    background-color: black;
    height: 1px;
}
.red { background-color: #F5B7B1; }
.green { background-color: lightgreen; }
.yellow { background-color: #F7DC6F; }
.purple { background-color: #D2B4DE; }
.blue { background-color: #D6DBDF; }

a>i.fa,.fab,.fas {
    color: black;
}
@media print {
    #navigation {
        display: none;
    }
    #content {
        padding: 0;
    }
}