JSFiddle - React, Tailwind, and code Playground

by hcgriggs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">
      <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 page-scroll" href="#page-top">Start Bootstrap</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">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li>
          <a class="page-scroll" href="#about">About</a>
        </li>
        <li>
          <a class="page-scroll" href="#new">New</a>
        </li>
        <li>
          <a class="page-scroll" href="#items">Items</a>
        </li>
        <li>
          <a class="page-scroll" href="#meet-the-team">Team</a>
        </li>
        <li>
          <a class="page-scroll" href="#exhibits">Exhibits</a>
        </li>
      </ul>

      <!--  searchbar -->
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>


<!-- start container-fluid -->
<div class="container-fluid">
...

CSS

hr {
  background-color: #000;
  /*firefox & opera*/
  border-color: #000;
  /*chrome & safari*/
  color: #000;
  /*IE 7+*/
}


/*navbar */

@media(min-width:767px) {
  .navbar {
    padding: 20px 0;
    -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
  }
  .top-nav-collapse {
    padding: 0;
  }
}

.container-fluid,
.row {
  height: 100%;
}

#carousel-header {
  height: 100%;
  background-color: #fff;
  text-align: center;
  padding-top: 150px;
}


/*About Section*/

#about {
  height: 100%;
  background-color: #eee;
  text-align: center;
}


/*New Section
*/

#new {
  height: 100%;
  background-color: #fff;
  text-align: center;
}

.newleft {
  background-color: black;
  height: 100%;
  padding-top: 70px;
}

.newright {
  background-color: gray;
  height: 100%;
  padding-top: 70px;
}


/*items section*/

#items {
  height: 100%;
  background-color: #eee;
  text-align: center;
}

.items-container {
  /*	padding-top: 70px;*/
}

.item1 {
  background-color: #fff;
}

.item2 {
  background-color: #eee;
}

.item3 {
  background-color: #aaa;
}

.item4 {
  background-color: #bbb;
}


/*meet the team*/

#meet-the-team {
  height: 100%;
  background-color: #fff;
  text-align: center;
}

.team-container {
  /*	padding-top: 70px;*/
}

.team1 {}

.team2 {}

.team3 {}


/*exhibits section*/

#exhibits {
  height: 100%;
  text-align: center;
  padding-right: 0;
}

.prohibition {
  background-color: black;
  height: 100%;
  padding-top: 70px;
  padding-right: 0;
}

.sandbox {
  background-color: gray;
  height: 100%;
  padding-top: 70px;
  padding-right: 0;
}

#footer {
  height: 100%;
  background-color: #eee;
  text-align: center;
  padding-top: 150px;
}