JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<!-- -------------- Header -------------- --> 
	
		<div class="header" data-size="big">

			<div class="header-inside">

				<div class="logo">
					<img src="img/logo.png" alt="logo">
				</div>

				<div class="navbar">
					<ol>
						<li>HOME</li>
						<li>ABOUT</li>
						<li>BLOG</li>
						<li>PORTFOLIO</li>
						<li>CONTACT</li>
					</ol>

				</div>
			</div>

		</div>

		<!-- -------------- Home -------------- --> 

	<div class="container">

		<div class="home">

			<div class="home-inside">

				<h1 id="home">CREATIVE DIGITAL SOLUTIONS</h1>
					<h3>Proin iaculis purus consequat sem cure.</h3>
				

				<button class="view_portfolio">View Portfolio</button>

			</div>

		</div> 

		<!-- -------------- About -------------- --> 

		<div class="about">
			
			<div class="head">
				<h2 id="head">PROFESSIONAL SERVICES</h2>
					<h3>Proin iaculis purus consequat sem cure</h3>
			</div>
				
			<div class="content">

				<div class="content_bg">
					<div class="content_icon"></div>
					<div class="content_text">
						<h4>BEAUTIFUL DESIGNS</h4>
						<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p>
					</div>
				</div>	

				<div class="content_bg">
					<div class="content_icon"></div>
					<div class="content_text">
						<h4>RESPONSIVE WEB</h4>
						<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p>
					</div>
				</div>	

				<div class="content_bg">
					<div class="content_icon"></div>
					<div class="content_text">
						<h4>MARKETING TOOLS</h4>
						<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p>
					</div>
				</div>	
					
					
			</div>

		</div>

		<!-- -------------- Blog -------------- --> 

		<!--...

CSS

body {
	font-family: 'Montserrat', sans-serif;
	width: 100%;
	margin: 0; 
	padding: 0 0 0 0; 
}


.header {
	background-color: white;
	width: 100%; 
	top: 0;
	position: fixed;
  height: 120px;
	z-index: 100;
  transition: height 600ms;
}

.header.small {
  height: 60px;
}


.header-inside {
	position: relative;
	top: 38%;
	transform: translateY(-38%); 
}


.logo {
	float: left;
	margin-left: 200px; 
}

.container { 
	height: auto !important; 
	position: relative; 
	min-height: 100%;
	margin-top: 120px; 
}


ol {
	list-style-type: none; 
	float: right;
	font-size: 14px; 
	font-weight: 500;
	color: #777777;
	margin: 8px;
	margin-right: 200px;
}

ol > li {
	float: left; 
	margin-left: 40px; 

}

.home {
	clear: both;
	background: url(img/bg1.png) center no-repeat;
	color: white;
	text-align: center;
	height: 530px; 
}

.home-inside {
	position: relative;
	top: 50%;
	transform: translateY(-50%); 
}

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

h3 {
	font-family: 'Roboto Slab', serif;
}

.float_right {
	float: right;
}

.float_left {
	float: left;
}

JavaScript

$(window).scroll(function () {
    var $header = $('.header');
    var userScrolledToBottom = $(document).scrollTop() > 0;
    if (userScrolledToBottom) {
       if (!$header.hasClass('small')) {
          $header.addClass('small');
       }
    }
    else {
        if ($header.hasClass('small')) {
           $header.removeClass('small');
        }
    }
});