JSFiddle - React, Tailwind, and code Playground

by Edbert

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="wrapper">
        <div class="grid-container">
            <div class="row">
                <div class="col-9 header">
                    	<h1>
		   			{ <a class="h-name" href="#home" id="home">Derp</a> } 

		   				<a class="h-about" href="#about">About Me</a> 

		   				<a class="h-portfolio" href="#portfolio">Portfolio</a>


		   	</h1>

                </div>
            </div>
            <div class="row">
                <div class="col-4 about1" id="about">
                    <p>My name is Paul Miller, an enthusiastic Front-End Web Developer. I love taking concepts and turning willing them into reality through espresso, code, and music. Messenger bag taxidermy jean shorts Cosby sweater, flexitarian Bushwick cray trust fund drinking vinegar. Cardigan synth narwhal, Etsy Truffaut Marfa tofu church-key craft beer PBR&B cornhole lo-fi gastropub seitan. Before they sold out health goth Kickstarter iPhone church-key Wes Anderson.</p>
                </div>
                <div class="col-10 about2"></div>
            </div>
            <div class="row">
                <div class="col-8 portfolio" id="portfolio">
                    <p>Messenger bag taxidermy jean shorts Cosby sweater, flexitarian Bushwick cray trust fund drinking vinegar. Cardigan synth narwhal, Etsy Truffaut Marfa tofu church-key craft beer PBR&B cornhole lo-fi gastropub seitan. Before they sold out health goth Kickstarter iPhone church-key Wes Anderson. Ennui fingerstache biodiesel, keffiyeh four loko next level locavore tattooed letterpress brunch sartorial tilde bicycle rights butcher salvia. Squid Wes Anderson Truffaut Portland, tilde DIY authentic. Truffaut Brooklyn authentic chia, vegan crucifix art party wayfarers meh viral banjo. Stumptown Neutra High Life PBR&B Carles twee.</p>
                    <p>Fashion axe gluten-free listicle, gastropub beard letterpress 3 wolf moon...

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
    width: 100%;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.header {
    top: 0;
    background-color: #EEE;
    border: 1px solid #CCC;
    position: fixed;
    padding-left: 3em;
    margin: 2% 0 0 5%;
    border-radius: 10px;
    z-index: 10;
}
.header h1 {
    float: left;
    padding: .4em;
}

/*-- ALL THINGS GRID --*/
 .grid-container * {
    box-sizing: border-box;
}
.grid-container {
    width: 100%;
    height: 100%;
}
.about1, .about2 {
    margin-top: 30em;
}
[class*='col-'] {
    float: left;
    min-height: 2em;
    width: 16.66%;
}
/*-- Clearfix hack -- */
 .row:before, .row:after {
    content:"";
    display: table;
    clear:both;
}
.col-1 {
    width: 10;
}
.col-2 {
    width: 20;
}
.col-3 {
    width: 30%;
}
.col-4 {
    width: 40%;
}
.col-5 {
    width: 50%;
}
.col-6 {
    width: 60%;
}
.col-7 {
    width: 70%
}
.col-8 {
    width: 80%
}
.col-9 {
    width: 90%
}
.col-10 {
    width: 100%
}
/*-- Content allignment --*/
[class*='col-'] p {
    text-align: center;
}
/*-- GRID BE DONE YO --*/

/*-- Sticky Footer Code Start, courtesy of http://ryanfait.com/sticky-footer/ --*/
 .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -3em;
}

JavaScript

$(function () {
    $("[href^='#']").on("click", function (e)  {
        var link = $(this);
        var $header = $('.header')
        var top = link.attr("id") == "home" ? 0 : $(link.attr('href')).offset().top - $header.height() - $header.outerHeight()
        $("html").animate({
            scrollTop: top
        }, 800);
        e.preventDefault();
    });
});

// x - a - b
// set z = a + b
// x - z