JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>
    	<h1>Write Away Freelance</h1>
    	<h2>Therese Ptak | Freelance Writer</h2>   
    </header>
    <nav class="main-nav">
        <a href="#">Nav Link 1</a>
        <a href="#">Nav Link 2</a>
        <a href="#">Nav Link 3</a>
        <a href="#">Nav Link 4</a>
    </nav>
    <div class="main">
        <div class="grid-container">
        	<div class="primary-content grid-11">
        		<img src="img/profile.jpg">
        		<p id="bio">Therese graduated with her B.A. in English and a Psychology minor from Mount Saint Mary's University. She has been writing for pleasure and publication for over 14 years and is a voracious reader. Her first publication was in the 6th grade. She's had short fiction published and now does mostly advertising copy, blogging and script writing. In her spare time she writes her fantasy novel, eats sushi and hikes with the love of her life. 
     
    Specialties: Blogging, Screen Writing, Fiction, Web Content, Television Scripts, Radio Scripts, Print Ads, Headlines, Email Blasts, Editing/Proofreading, eBook Content</p>
        	</div>
        </div>
    	<div class="grid-container secondary-content">
	    	<div id="copyEd" class="extra-content grid-4">
	    		<h2>Copyeditor</h2>
	    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum vel ipsum ac elementum. Mauris scelerisque in ligula ut vulputate. Mauris quis malesuada lacus. Pellentesque lectus dolor, tristique at ligula eget, ornare ornare neque. Pellentesque convallis leo enim, bibendum pharetra nulla bibendum quis. Sed blandit, urna vel pharetra congue, turpis nulla interdum tortor, id pulvinar dui dui vel enim. Quisque laoreet quam vehicula turpis posuere, ac laoreet erat euismod. Praesent euismod est sit amet mauris pellentesque malesuada ornare fringilla dui. Donec placerat id neque ut vehicula. Aliquam accumsan libero ipsum, nec fringilla ligula aliquam commodo. Aenean bibendum, purus ac sodales aliquam, metus enim pharetra...

CSS

body {
     font: 1em/1.5 sans-serif;
     color: #444135;
}
p {
     margin-bottom: 24px;
}
header, .main-nav {
   text-align: center;
}
header {
  color: #f7f8ee;
}
.main-nav a {
 font-size: .9em; 
 text-decoration: none;
 font-weight: bold;
 text-transform: uppercase;
 color: #444135;
 display: inline-block;
 margin: 24px 12px;
}
.main-nav a:first-child {
   border-top: 2px solid #f07057;
   padding-top: 10px;
}
.main h2 {
   column-span: all;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 250px;
}
header {
  height: 300px;
  padding-top: 50px;
  background: #f07057;
  position: fixed;
  top: 0;
  width: 100%;
}

.main, .main-nav {
  position: relative; 
}
.main-nav {
  background: #fff;
  height: 80px;
  z-index: 150;
  margin-bottom: -80px;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}
.main {
  background: #f2f2e8;
  padding: 110px 50px 50px;
  column-count: 2;
  column-gap: 40px;
}

img {
	max-width: 150px;
	border-radius: 100%;
}


/* Global
================================ */

.grid-container {
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
}

img {
	width: 100%;
}

/* Media Queries
================================ */

@media (min-width: 768px) {

	/* Columns
	================================ */

	.grid-container > [class^="grid-"]  {
		float: left;
		min-height: 1px;
		padding-left: 10px;
		padding-right: 10px;
		margin-left: 2%;
	}
	.grid-container > [class^="grid-"]:first-child {
		margin-left: 0;
	}
	.grid-container > [class^="grid-"]:last-child {
		float: right;
	}

	/* Columns are 65px wide, with 20px gutters
	=========================================== */

	.grid-1 {
		width: 6.5%;
	}
	.grid-2 {
		width: 15%;
	}
	.grid-3 {
		width: 23.5%;
	}
	.grid-4 {
		width: 32%;
	}
	.grid-5 {
		width: 40.5%;
	}
	.grid-6 {
		width: 49%;
	}
	.grid-7 {
		width: 57.5%;
	}
	.grid-8 {
		width: 66%;
	}
	.grid-9 {
		width:...