JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<body>
	<div id="container">
	<header>
	<nav>
		<a id="minilogo" href="index.html"><img alt="Syncrofinity Designs" src="images/mini-logo.svg"/></a>
		<ul>
			<li id="nav_about"><a href="#">About Me</a></li>
			<li id="nav_studies"><a href="#">Studies</a></li>
			<li id="nav_portfolio"><a href="#">Portfolio</a></li>
			<li id="nav_skills"><a href="#">Skills</a></li>
			<li id="nav_contact"><a href="#">Contact</a></li>
		</ul>
	</nav>
	<img id="logo" src="images/logo.svg">
	</header>
<section id="about">
	<div id="breakpink">Pink break</div>
	<h1>Hello</h1>
	<h2>My name is <span id="bold_pink">Nicole Pretorius</span></h2>
	<img id="nicole" alt="Nicole Pretorius" src="images/nicole.jpg">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 
		elit, sed do eiusmod tempor incididunt ut labore et 
		dolore magna aliqua. Ut enim ad minim veniam, 
		quis nostrud exercitation ullamco laboris nisi ut 
		aliquip ex ea commodo consequat. Duis aute irure 
		dolor in reprehenderit in voluptate velit esse cillum 
		dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
		cupidatat non proident, sunt in culpa qui officia deserunt 
		mollit anim id est laborum.</p>

		<section id="stats">
			<h2>Statistics</h2>
			<ul>
				<li>Nationality: South-African</li>
				<li>D.O.B: 6 December</li>
				<li>Languages
					<ul>
						<li>Afrikaans</li>
						<li><img alt="skill level" src=""></li>
						<li>English</li>
						<li><img alt="skill level" src=""></li>
						<li>Dutch</li>
						<li><img alt="skill level" src=""></li>
					</ul>
				</li>
				<li>Enneagram: Type 5 - The Investigator</li>
			</ul>
		</section><!--/stats-->

</section><!--/about-->

<section id="studies">
<div class="break">orange break</div>

<h1>Studies</h1>
<h2>I am currently studying at <span id="bold_orange">Thomas More Mechelen</span> for a 
Bachelors degree in <span id="bold_blue">Interactive Multimedia Design</span></h2>
<img id="tmlogo" alt="Thomas More Logo"...

CSS

#container{
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
	font-family: "Droid Sans", sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	color: black;
	background-color: white;
}

#minilogo img{
	width: 350px;
	height: auto;
}

nav{
	background-color: #353535;

}

nav li{
	background-color: #353535;
	text-align: center;

	
}

nav a:link,
nav a:visited,
nav a:hover,
nav a:active{
	text-decoration: none;
	display:inline-block;
	padding: 10px;
	color: white;


}
#nav_about a:visited,
#nav_about a:hover{
	background-color: #f92659;
	color: white;
	display: block;
	
}
#nav_studies a:visited,
#nav_studies a:hover{
	background-color: #f25600;
	color: white;
	display: block;
	
}
#nav_portfolio a:visited,
#nav_portfolio a:hover{
	background-color: #3da3ef;
	color: white;
	display: block;
	
}
#nav_skills a:visited,
#nav_skills a:hover{
	background-color: #91e22a;
	color: white;
	display: block;
	
}
#nav_contact a:visited,
#nav_contact a:hover{
	background-color: #7171ff;
	color: white;
	display: block;
	
}

#nav_about a:active{
	background-color: #9a1837;
}

#nav_studies a:active{
	background-color: #ad3d00;
}

#nav_portfolio a:active{
	background-color: #296ea2;
}

#nav_skills a:active{
	background-color: #5b8e1a;
}

#nav_contact a:active{
	background: #434397;
}

#nicole{
	width: 133px;
	height: 141px;
}


#logo{
	width: 350px;
	height: auto;
	padding: 20px 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

#breakpink{
	background-image: url(../images/break_pink.svg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	background-size: cover;
	height: 100%;
	text-indent: -9999px;
}



}

#breakpink{
	background-image: url(../images/break_pink.svg);
}

#tmlogo{
	width: 300px;
	height: 117px;
}