JSFiddle - React, Tailwind, and code Playground

by theMugician

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<section id="topHalf">
      		<div class="navbar navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">    
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                        <!--<span class="glyphicon-align-justify"></span>-->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#topHalf">Company</a>
                    </div>
                    <div class="collapse navbar-collapse navbar-responsive-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                            <a href="#topHalf">Home</a>
                            </li>
                            <li>
                            <a href="#portfolio">Portfolio</a>
                            </li>
                            <li>
                            <a href="#about">About</a>
                            </li>
                            <li>
                            <a href="#contact">Contact</a>
                             </li>
                        </ul><!--navbar-right-->
                    </div><!--navbar-responsive-collapse-->
                </div><!--container-->
            </div><!--nav-bar fixed-top-->
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="click"><a href="portfolio">Learn More</a>
                </h1>
            </div>
        </div>
    </div>
    </section>
<section id="portfolio">
</section>
<section...

CSS

#topHalf{
    height: 400px;
    background-color: #ffe292;
}

#portfolio{
    height: 400px;
    background-color: #fff;
}

#about{
    height: 400px;
    background-color: #ffe292;
}

#contact{
    height: 400px;
    background-color: #fff;
}

#foot{
    height: 60px;
    background-color: #4d4d4d;;
    
}

#foot a{
    color: #fff;
}

.click{
    color: #4d4d4d;
}

.navbar-fixed-top {
  background: #fff;
  height: 56px;
}
/* line 193, ../sass/styles.scss */
.navbar-fixed-top .navbar-header img {
  float: left;
  padding: 0 10px;
  padding-top: 8px;
}
/* line 198, ../sass/styles.scss */
.navbar-fixed-top .navbar-header .navbar-brand {
  color: #4d4d4d;
  font-family: LatoLatin-Bold;
  font-size: 24px;
  padding-top: 20px;
  padding-right: 0px;
  margin-left: 0px;
}
/* line 207, ../sass/styles.scss */
.navbar-fixed-top .navbar-toggle .icon-bar {
  transition: background-color 0.2s ease;
  background-color: #4d4d4d;
}
/* line 211, ../sass/styles.scss */
.navbar-fixed-top .navbar-toggle .icon-bar:hover {
  background-color: #8cc63f;
}
/* line 215, ../sass/styles.scss */
.navbar-fixed-top .navbar-nav > li > a {
  padding-top: 18px;
  padding-bottom: 18px;
  text-shadow: transparent;
  color: #4d4d4d;
  font-family: LatoLatin-Regular;
  font-size: 18px;
}
/* line 222, ../sass/styles.scss */
.navbar-fixed-top .nav > li > a:focus {
  color: #4d4d4d;
  background: transparent;
}
/* line 226, ../sass/styles.scss */
.navbar-fixed-top .nav > li > a:hover {
  color: #fff;
  background: #4d4d4d;
}
/* line 230, ../sass/styles.scss */
.navbar-fixed-top .collapse {
  background-color: #fff;
}
/* line 233, ../sass/styles.scss */
.navbar-fixed-top .collapse > li > a:hover {
  color: white;
  background: #4d4d4d;
}

@media (max-width: 768px) {
    .navbar-fixed-top .nav > li > a {
    margin: 0 auto;
  }
  /* line 550, ../sass/styles.scss */
  .navbar-fixed-top .nav > li > a:focus {
    color: #4d4d4d;
    background: transparent;
    text-decoration: none;
  }
  /* line 555,...

JavaScript

function scrll(selector,speed){
    for (var i = 0; i < selector.length; i++){
        var findIt = '.find("a")';
        var selected = selector[i];
        selected += findIt;
        selected.click(function(e) {
            e.preventDefault();
            var section = $(this).attr("href");
            $("html, body").animate({
                scrollTop: $(section).offset().top - 54
            },speed[i]);
        });
    };
};
var selector = ['$(".navbar")','$(".click")','$("#foot")'];
var speed = [2000,1000,2000];
scrll(selector,speed);