JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<body>

    <nav class="navbar navbar-fixed-bottom navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">Create Theme</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a id="about" href="#about">About</a></li>
            <li><a id="services" href="#services">Services</a></li>
            <li><a id="contact" href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>

<section id="about-content">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 text-center">
                <h1 class="introtext">About</h1>
                <span class="btn buttonborder">
                    Text placeholder
                </span> 
            </div>
        </div><!-- row -->
    </div>
</section>



<section id="services-content">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Services</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet scelerisque leo, sit amet adipiscing odio. Praesent leo nisi, placerat in eros in, molestie auctor augue. Sed semper dui est, et...

CSS

body {
        margin-top: 50px;
        margin-bottom: 50px;
        background: none;
}

section {
    width: 100%;
    height: 100%;
    position:absolute;
    top: 0;
    left: 0;
}

JavaScript

//init
$("#contact-content").show()
$("#services-content").hide()
$("#about-content").hide()

$("#about").click(function(){
    $("#about-content").show()
    $("#services-content").hide()
    $("#contact-content").hide()
})
$("#services").click(function(){
    $("#services-content").show()
    $("#about-content").hide()
    $("#contact-content").hide()
})
$("#contact").click(function(){
    $("#contact-content").show()
    $("#services-content").hide()
    $("#about-content").hide()
})