JSFiddle - React, Tailwind, and code Playground

HTML

<title>St Philips</title>
	<link rel="stylesheet" type="text/css" href="stphilipscss.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700' rel='stylesheet' type='text/css'>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  
  </head>
  
  <body> 
  
  
  
  
  
  		
		<!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->
		<header>
		
			<h4 id="textlogo">ST PHILIPS NERI</h4>
				<nav>
					<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Contact</a></li>
					</ul>
				</nav>
				
		</header>
		<!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->
		
		
		<!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->
		<section id="section1">
		
			<article>
			<h1><i>I am the way,</i> the truth, and the life.</h1>
			</article>
				<a href="#"><button type="button">Come in</button></a>
				
		</section>
		<!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->
		
		<section id="section2">
		<article>
		<h1>You're Welcome</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut posuere dui. Praesent nisl ante, dapibus eget dolor in, imperdiet pharetra tellus. Aliquam euismod hendrerit massa, sit amet interdum risus accumsan ac. In commodo varius felis, quis feugiat tellus tempor quis</p>
		<p>Donec gravida mauris lacinia, pellentesque nisl nec, vestibulum tellus. Maecenas non varius ligula. Ut sit amet leo quis orci porttitor posuere eget vel ex. Fusce sit amet purus ac eros venenatis efficitur nec eu tortor. </p>
		</article>
		</section>
		
		
   </body>
</html>

CSS

body{
margin:0px;
/*overflow:hidden;*/
}


header{
display:flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
background-color:white;
border-bottom-width:1px;
border-color:#e5e5e5;
border-bottom-style:solid;
justify-content:space-between;


}



#textlogo{
margin:0px;
color:#191919;
font-family: open-sans, sans-serif;f;
font-weight:700;
display:inline-block;
margin-left:100px;
font-size:17px;
visibility:hidden;
}

nav{
margin-right:100px;
}

nav li{
display:inline;
padding:10px;
}

a{
color:#191919;
list-style-type:none;
text-decoration:none;
font-family: 'Open Sans', sans-serif;
font-weight:400;
font-size:15px;
}



#section1{
height:667px;
background-image:url("http://i300.photobucket.com/albums/nn18/ojijimanuel/2560x1440_cobble_stones_zpsy5twolwx.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;

}


#section1 article h1{
color:white;
font-size:63px;
font-family: 'open sans', serif;
font-weight:700;
margin-bottom:100px;
padding-top:150px;
margin-left:100px;
margin-right:100px;
}




button{
background-color:transparent;
color:white;
border-color:white;
border-style:solid;
font-size:25px;
border-width:1px;
font-family:'Open Sans';
font-weight:300;
padding-left:30px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
cursor:pointer;
}

#section2{
height:600px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}



h1 i{
font-family: 'Playfair Display', serif;
}