JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://guidobouman.github.io/jquery-panelsnap/jquery.panelSnap.js"></script>
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <header>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <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.php">
               <p>Logo</p>
              </a>
            </div>     

            <div class="collapse navbar-collapse" id="navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right menu">
                <li><a href="empresa.php">Empresa</a></li>
                <li class="divider"></li>
                <li><a href="solucao.php">Soluções</a></li>
                <li class="divider"></li>
                <li><a href="servicos.php">Centro de Serviços</a></li>
                <li class="divider"></li>
                <li><a href="carreira.php">Carreira</a></li>
                <li class="divider"></li>
                <li><a href="#">Portal do Cliente</a></li>
                <li class="divider"></li>
                <li><a href="contato.php">Contato</a></li>                   
              </ul>
           </div>
        </div> <!--/container--> 
      </nav>
    </header> 











<section class="bg-1">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h1 class="h0 text-center text-white">MUITO MAIS QUE UM ERP</h1>
						<h2 class="text-center text-white">GESTÃO EMPRESARIAL...

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/*css - reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*css global*/

*{font-family:'swis721_cn_btroman';}

body{
    overflow-x: hidden;
    padding-top: 51px;
  }

section{
  overflow: hidden;
  width: 100%; 
  height: 100%;
  min-height:100vh;
  position: relative;
}

::selection {
	color: #fff;
	background: #58bc10;
}

	.panels.offset section{
   	height: calc(100% - 85px);
   }

  .panels.offset header{
   height: 85px;
   position: fixed;
 	background-color: transparent;
  }



/*typography*/

h1,h2,h3,h4,h5,h6 {
	text-transform: uppercase;
	font-family:'swis721_cn_btbold';

}

.h0 {font-size: 4.500em;}

h1 {font-size:2.500em;	  
    font-weight: bold;
    
 }

h2 {font-size: 2.000em;}

h3 {font-size: 1.500em;
    font-weight: bold;
    padding-bottom: 10px;
}

h4 {font-size: 1.125em;
		text-transform: uppercase;
	  padding-bottom: 10px;}

p {font-size:1.300em;
   color:#6d6d6d;
 }

 ul .fa-ul{
  padding-bottom:...

JavaScript

$(document).ready(function(){
    $("#timeline-btn").click(function(){
      $("#timeline-context").toggle();
    });

  $("#seta").click(function(){
    console.log("teste clicado!");
  });
    setInterval(function() {
    if($('#seta').hasClass('animated bounce')){
      $('#seta').removeClass('animated bounce');
    }else{
      $('#seta').addClass('animated bounce');
    }
  }, 1500);
    jQuery(function($) {
    $('body').panelSnap({
       offset: 50,
       directionThreshold: 50,
        keyboardNavigation: {
            enabled: true,
            nextPanelKey: 39,
            previousPanelKey: 37,
            wrapAround: false
          }
    });
  });


  });