JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<ul>
			<li><a href="#about">About</a></li>
			<li><a href="#services">Services</a></li>
            <li><a href="#" id="#logo"><img class="topleftlogo" src="images/logo.png"/></a></li>
			<li><a href="#portfolio">Portfolio</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</header>

	<section id="home" class="photobg">
  		<div class="inner">
    			<div class="copy">
				<h1 class="logoimage"></h1>
    			</div>
  		</div>
	</section>

	<section id="about" class="content">
  		<div class="inner">
    			<div class="copy">
    				<h1>Who I Am</h1>
    				<p class="aboutparagraph">Hello! Lorem ipsum dolor sit amet, <span class="lightblue">consectetuer adipiscing elit,</span> sed diam nonummy nibh euismod tincidunt ut <span class="mangosteenred">laoreet dolore magna</span> aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br></br>Duis autem vel eum iriure dolor in hendrerit in <span class="green">vulputate</span>.</p>
    				<p class="aboutparagraph">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
			</div>
  		</div>
	</section>

	<section id="services" class="photobg">
  		<div class="inner">
    			<div class="copy">
    				<h1>What I Do</h1>
    				<p class="aboutparagraph">Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, <span class="yellow">quam nunc putamus parum claram,</span> anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    				<p class="aboutparagraph">Duis autem  <span...

CSS

html, body{
  margin:0px;
  padding:0px;
  height: 100%;
}

section {
    height: 100%;
}

header{
  z-index: 1;
  position:fixed; 
  width:100%;  
  background:rgba(0,0,0,0.1);
}

header ul{
    margin: 0 auto;
	text-align: center;
    clear: both;
}

header ul li{
	display: inline;
}

header ul li a:hover{
    color:yellow;
}

header a{
  color:white;
  background:rgba(0,0,0,0.1); 
  display: inline-block; 
  padding:0px 30px; 
  height:60px;
  line-height:60px; 
  text-align:center;
  font-family: 'Roboto Slab', serif; 
  text-decoration:none;
  text-transform:uppercase; 
  letter-spacing:2px; 
  font-weight:700;
  vertical-align: middle;
}

#home{
 background:url(images/sailing.JPG);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}
#services{
  background: url(images/nyc1.jpg);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}

.skills{
	width: 100%;
	margin: 0 auto;
}

.photobg, .content{
  text-align:center; 
  position:relative;
  width: 100%;
}

.inner{
  height: 100%;
  text-align: center;
  &:before {
  	content: '';
  	display: inline-block;
  	height: 100%; 
  	vertical-align: middle;
  	margin-right: -0.25em; /* Adjusts for spacing */
  }
}

.photobg .inner{
  background: rgba(0,0,0,0.4) url(images/pattern.png);
}

.copy{
  @include pad-rwd;
  display: inline-block;
  vertical-align: middle;
  max-width: 85%;
  height:100%;
}

.photobg h1, .photobg p{ 
  color:#fff;
}

.content h1, .content p{
  color:#333;
}

h1{
  margin-top:70px;
  font-family: 'Roboto Slab', serif;
  font-weight:400;
  font-size:32px;
}

p{
  font-family: 'Roboto Slab', serif;
  font-size:14px;
}

/*PORTFOLIO*/

.portfolio{
	background: url(images/bgnet.png) repeat;
}

.box{
	text-align: center;
	width: 80%;
	margin: 0 auto;
}

.myprojects {
	margin-top: 70px;
	margin-bottom: 30px;
}

.projectshot {
	position: relative;
	margin: 0 10px 10px 0;
	display: inline-block;
}

.projectshot img...