JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://startbootstrap.com/templates/css/bootstrap.css">
<link rel="stylesheet" href="http://startbootstrap.com/templates/css/stylish-portfolio.css">
<link rel="stylesheet" href="http://startbootstrap.com/templates/font-awesome/css/font-awesome.min.css">
<script src="http://startbootstrap.com/templates/js/jquery-1.10.2.js"></script>
<script src="http://startbootstrap.com/templates/js/bootstrap.js"></script>
<!-- Side Menu --> <a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>

<div id="sidebar-wrapper">
    <ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>

        <li class="sidebar-brand"><a href="http://startbootstrap.com">Start Bootstrap</a>

        </li>
        <li><a href="#top">Home</a>

        </li>
        <li><a href="#about">About</a>

        </li>
        <li><a href="#services">Services</a>

        </li>
        <li><a href="#portfolio">Portfolio</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
    </ul>
</div>
<!-- /Side Menu -->
<!-- Full Page Image Header Area -->
<div id="top" class="header">
    <div class="vert-text">
         <h1>Start Bootstrap</h1>

         <h3><em>We</em> Build Great Templates, <em>You</em> Make Them Better</h3>
 <a href="#about" class="btn btn-default btn-lg">Find Out More</a>

    </div>
</div>
<!-- /Full Page Image Header Area -->
<!-- Intro -->
<div id="about" class="intro">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 text-center">
                 <h2>Subtle Sidebar is the Perfect Template for your Next Portfolio Website Project!</h2>

                <p class="lead">This template really has it all. It's up to you to customize it to your liking! It features some fresh photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the...

JavaScript

$("#menu-close").click(function (e) {
     e.preventDefault();
     $("#sidebar-wrapper").toggleClass("active");
 });

 $("#menu-toggle").click(function (e) {
     e.preventDefault();
     $("#sidebar-wrapper").toggleClass("active");
 });

 $(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
                 }, 1000);
                 return false;
             }
         }
     });
 });