JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div id="masthead"><h1>Goizueta Advantage</h2></div>
    <div class="nav nav-one"><h2><a href="#">Full-Time</a></h2></div>
<div class="nav nav-two"><h2><a href="#">Evening</a></h2></div>
<div class="nav nav-three"><h2><a href="#">Executive</a></h2></div>

CSS

body {
    font: 14px/1.5 Helvetica,sans-serif;        
}
h1, h2 {
    text-transform: uppercase;
    font-weight: bold;
}
h1 {
    font-size: 2.57em;
    position: absolute;
    top: 66%;
    left: 0;
right: 0;
 text-align: center;   
}
h2 {
    font-size: 24px;
    color: #FFF;
    height: 100%
}
h2 a {
    display: block;
    height: 100%;
    padding: 0.5em;
    
    color: inherit;
    text-decoration: none;
}

div {
    box-sizing: border-box;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#masthead {
    top: 0;
    left: 0;
    right: 0;
    bottom: 34%;
    background-image: url(http://placekitten.com/1536/1365/);
    
}
.nav {
    top: 67%;
    bottom: 0;
    background-image: url(http://placekitten.com/512/682/);
}
.nav-one {
    left: 0;
    right: 67%;
}
.nav-two {
    left: 34%;
    right: 34%;
}
.nav-three {
    left: 67%;
    right: 0;
}