JSFiddle - React, Tailwind, and code Playground

by ggChris

HTML

<body>
	<header class="header">
	    <nav class="navbar navbar-default custom-navbar">
	      <div class="container-fluid">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <a class="logo" href="#">
	            <img class="main-logo" src="http://castlehs.com/studentsites/kinsella/css/images/logo.png">
	            <img class="accent-logo" src="http://castlehs.com/studentsites/kinsella/css/images/logo.png">
	          </a>
	        </div>
	        <div class="collapse navbar-collapse navbar-right" id="myNavbar">
	          <ul class="nav navbar-nav">
	            <li>
	              <a href="#">About</a>
	            </li>
	            <li>
	              <a href="#">Stats</a>
	            </li>
	            <li>
	              <a href="#">Drivers</a>
	            </li>
	            <li id="li-item">
	              <a href="#">Contact</a>
	            </li>
	            <li id="btn">
	              <a href="#">Pledge Now</a>
	            </li>
	          </ul>
	        </div>
	      </div>
	    </nav>  		
	</header>
	<section class="landing">
		<div class="landing-container">
	      	<div class="type-wrap">
	        	<h1>Young drivers are <span id="typed" style="white-space:pre;"></span></h1>
	      	</div>
		    <div id="typed-strings">
		    	<p><strong>smart.</strong></p>
		        <p><strong>rational.</strong></p>
		        <p><strong>"fresh".</strong></p>
		        <p><strong>reckless.</strong></p>
		    </div>
		    <p class="landing-sub">Real Teens. | Hard Facts.</p>
      		<div class="btn-landing"><a href="#about">Get the Facts.</a></div>	      				
		</div>
		<a class="bouncing-arrow" href="#about"></a>
	    <video autoplay loop muted id="landing-video">
	      <source...

CSS

header {
	position: fixed;
    width: 100%;    
    z-index: 10;
    height: 85px;
    box-sizing: border-box;
}

.navbar.custom-navbar {
    background: 0 0;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    line-height: 85px;
}

.navbar.custom-navbar .container-fluid {
    padding: 0;
    width: 90%;
    margin: 0 auto;
}

.navbar.custom-navbar .navbar-header .logo{
  	width: auto;
  	height: auto;
  	margin-top: 20px;
  	display: inline-block;
}

.navbar.custom-navbar .navbar-header .logo img{
    height: 45px;
    float: left;
    width: 240px;
}

.accent-logo{
    display: none;
}

.navbar.custom-navbar .navbar-nav > li > a {
    color: #FFF;
    font-size: 16px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    position: relative;
    display: inline;
    padding: 0;
    margin-left: 10px;
    margin-right: 10px;
    text-transform: uppercase;
}

.navbar.custom-navbar .navbar-nav > li > a:hover,
.navbar.custom-navbar .navbar-nav > li > a:focus {
    color: #84CF96;
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
}

.navbar.custom-navbar .navbar-nav a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    margin-bottom: -10px;
    bottom: 0;
    left: 0;
    background-color: #84CF96;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.15s ease-in-out 0s;
    transition: all 0.15s ease-in-out 0s;
}

.navbar.custom-navbar .navbar-nav a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

#btn a {
    border: 1px solid #FFF;
    padding: 10px;
}

#btn a:hover,
#btn a:focus {
    color: #FFF;
    background-color: #84CF96;
    border-color: #84CF96;
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
}

#btn a:hover:before {
    visibility:...

JavaScript

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});