JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<header class="full_height" id="home">
    <nav id="nav"> <a href="index.html"><img src="logo.png" id="logo"></a>
        <ul>
            <li><a href="#">Test</a>
            </li>
        </ul>
    </nav>
    <div id="learn"><a href="#a1">Learn More</a>

    </div>
</header>
    <a id="a1"></a>
<section style="height:100%;background-color:white;">a1
    <div class="container"></div>
    <div id="learn"><a href="#a2">Learn More</a>

</section>
    <a id="a2"></a>
<section style="height:100%;">a2
    <div class="container"></div>
    <div id="learn"><a href="#a3">Learn More</a>

    </div>
</section>
    <a id="a3"></a>
<section style="height:100%;background-color:white;">a3
    <div class="container"></div>
</section>

CSS

* {
    padding:0px;
    margin:0px;
    border: 0px;
}
a {
    text-decoration:none;
}
a, img {
    border:none;
    outline:none
}
html, body {
    height: 100%;
}
body {
    font-family: myriad-pro, Helvetica, sans-serif;
    background-color: rgb(248, 248, 248)
}
header {
}
h1, h2, h3, h4 {
    color: #0f0f0f;
}
section {
    min-height:200px;
position: relative;
}
.full_height {
    height: 100%;
    min-height: 350px;
    position: relative;
}
.container {
    width: 780px;
    margin:0px auto;
}
.fluid_container {
    padding-left: 40px;
    padding-right: 40px;
}
.per_fluid {
    min-height: 100%;
}
ul li {
    display: inline;
}
li {
    list-style-type: none;
}
#nav {
    padding: 20px;
}
#nav ul {
    float: right;
}
#nav img {
    float:left;
}
.container p {
    float:left;
}
#home {
    background-color: rgb(248, 248, 248);
    color: rgb(28, 94, 100);
}
#header-content {
    color: rgb(28, 94, 100);
    font-size: 45px;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.35);
    font-weight: bold;
    display:block;
}
.btn {
    padding: 15px;
    background: rgba(255, 255, 255, 0.5);
    margin-right: 15px;
}
svg {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}
div.buttons {
    position:relative;
    padding-top:60px;
    padding-left: 70px;
    width: 400px;
}
nav {
    position:relative;
    z-index:1;
}
.btn_main {
    background: -webkit-gradient(linear, left top, left bottom, from(#168add), to(#007ee5));
    background: -moz-linear-gradient(top, #168add, #007ee5);
    border-radius: 4px;
}
.lrg_input {
    padding: 10px;
    width: 40%;
    margin-bottom: 20px;
    font-size: 16px;
}
#learn {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index:1;
    margin-bottom: 20px;
    left:50%;
    width: 150px;
    margin-left: -75px;
    text-align: center;
    line-height: 50px;
}
#learn a {
    color: black;
  ...

JavaScript

$("a").on("click", function (e) {
    e.preventDefault();
    var nextAnchor = this.hash.replace("#", "");
    // var nextanchor = $(this).attr('href'); 
    // var gotoPoint = $(nextAnchor).position().top
    var gotoPoint = $("#" + nextAnchor).position().top;
    $('body').animate({
        scrollTop: gotoPoint
    }, 'normal');
});