JSFiddle - React, Tailwind, and code Playground

by painotpi

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Smooth Page Scrolling</title>
		<script type='text/javascript' src='smoothpagescrolling.js'></script>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	</head>
	<body>
	<header>
		<a href="#" id="logo">Logo</a>
					<ul id="nav" class="nav">
						<li><a href="#home">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#services">Services</a></li>
						<li><a href="#gallery">Gallery</a></li>
						<li><a href="#contact">Contact</a></li>
					</ul>
	</header>

<section id="home" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Home</h1>
    <p>Some text here!</p>
    </div>
  </div>
</section>

<section id="about" class="content">
  <div class="inner">
    <div class="copy">
    <h1>About</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="services" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Services</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>
  
<section id="gallery" class="content">
  <div class="inner">
    <div class="copy">
    <h1>Gallery</h1>
      <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="contact" class="newsection">
	<h1>Contact</h1>
	<p>E-mail: webmaster@yahoo.com</p>
</section>

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
	</body>
</html>

CSS

@mixin breakpoint($point) {
    @if $point == widescreen {
        @media (min-width: 1224px) { @content; } }
    @else if $point == desktop {
        @media (min-width: 769px) { @content; } }
    @else if $point == tablet {
        @media (min-width: 481px) { @content; } }
    @else if $point == mobile {
        @media (max-width: 480px)  { @content; } }
    @else if $point == mini {
        @media (min-width: 260px)  { @content; } } }

$pad-base: 12px;
$pad-mobile: $pad-base * 1.5;
$pad-tablet: $pad-base * 1;
$pad-desktop: $pad-base * 1.5;
$pad-widescreen: $pad-base * 2;

@mixin pad-rwd {        
    @include breakpoint(mobile) {
        padding: $pad-mobile; }
    @include breakpoint(tablet) {
        padding: $pad-tablet; }
    @include breakpoint(desktop) {
        padding: $pad-desktop; }
    @include breakpoint(widescreen) {
        padding: $pad-widescreen; }
}

html, body{
  margin:0px; padding:0px; height: 100%;}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

section {
    height: 100%;
}

header{
  z-index: 1;
  position:fixed; 
  width:100%;  
  background:rgba(0,0,0,0.1);
  min-width: 900px; /* This prevents the entire header(logo and nav buttons) from dropping underneath one another when the width of the page is smaller than the nav width.*/
}

header ul{
	float:right;
	padding:0px;
	margin:0px;
}

header ul li{
	display: inline;
	float:left;
	
}

header ul li a:hover{
    color:yellow;
}

header #logo:hover{
    color:red;
}

header a{
  color:white;
  background:rgba(0,0,0,0.1); 
  display:inline-block; 
  padding:0px 30px; 
  height:60px;
  line-height:60px; 
  text-align:center;
  font-family: 'Roboto Slab', serif; 
  text-decoration:none;
  text-transform:uppercase; 
  letter-spacing:2px; 
  font-weight:700;
  @include breakpoint(mobile)     { width: 100%; }
  @include breakpoint(tablet)     { width: 50%; }
  @include breakpoint(desktop)    { width: 25%; }
  @include...

JavaScript

$(function() {
    $('header ul a').bind('click',function(event){
        var $anchor = $(this);
 
        $('html, body').animate({
            scrollTop: $($anchor.attr('href')).offset().top + "px"
        }, 1500);
        /*
        if you don't want to use the easing effects:
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000);
        */
        event.preventDefault();
    });
});