JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="flex-container">
	<div class="logo">
		<h1>
			<span id="associated" class="pressed">Associated</span>
			<br />
			<img id="kyoto" class="pressed" src="http://i.imgur.com/CC4NBaN.png" alt="Kyoto">
			<br />
			<span id="program" class="pressed">Program</span>
		</h1>
	</div>
	<div class="seasons">
		<ul class="seasons-nav">
			<li class="fall pressed"><a href="#">Fall</a></li>
			<li class="spring pressed"><a href="#">Spring</a></li>
		</ul>
	</div>
	<div class="lower">
		<a href="#" class="apply-now">Apply Now</a>
	</div>
</div>

</body>

CSS

/* ----------- base styles ----------- */
* {
  box-sizing: border-box;
}
body {
  background-color: #EEE;
  margin: 0;
  padding: 0;
  background-image: url("http://i.imgur.com/VbtlLHd.png");
  /* Background image is from Subtle Patterns (subtlepatterns.com)
	 * and is distributed under a Creative Commons Attribution-
	 * ShareAlike 3.0 Unported License. Check out the site for
	 * licensing details.*/


  font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #1a1a1a;
  /* It's this stuff right here that's being obnoxious. */
  font-size: 1em;
}
a {
  text-decoration: none;
  color: #1a1a1a;
}
p {
  margin: 0;
  padding: 1em 5%;
}
ul {
  margin: 1em 5%;
  padding: 0;
}
/* style the flexboxes! */
.flex-container {
  max-width: 65em;
  margin: 0 auto;
}
.logo {
  width: 100%;
  /*background: #eee;*/

  padding: 0;
}
.seasons {
  width: 100%;
  padding: 1em 0;
  /*background: #bbb;*/

}
.seasons ul {
  margin: 1em 0;
  padding: 0;
  list-style-type: none;
  border-image: linear-gradient;
}
.lower {
  width: 100%;
  height: 4.5em;
  /*background: #444;*/

  color: #eee;
  padding: 1em 0;
}
.seasons-nav li {
  display: inline-block;
  width: 50%;
  height: 4.5em;
  font-size: 110%;
}
.fall {
  -webkit-order: 1;
  -ms-flex-order: 1;
  -moz-order: 1;
  -ms-order: 1;
  order: 1;
}
.spring {
  -webkit-order: 2;
  -ms-flex-order: 2;
  -moz-order: 2;
  -ms-order: 2;
  order: 2;
}
/* let the kyoto image scale with resize: */
img#kyoto {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */

}
/* style the logo stuff! */
.logo > h1 {
  font: 125% "Palatino Linotype", Palatino, "Book Antiqua", serif;
  font-weight: bold;
  letter-spacing: .6em;
  z-index: 1;
  position: relative;
  text-align: center;
}
.logo {
  padding-left: 1em;
}
/* style the seasons: */
.fall {
  background-image: url("http://i.imgur.com/ux7gibb.png");
  background-size: 80px 80px;
  /* ^^ May need to change this for...