JSFiddle - React, Tailwind, and code Playground

HTML

<section class="hero home-splash np">
    <header class="cf">
        <div class="container hdr">
            <div class="grid-25 fixed"> <a class="title" href="#">Title</a>

            </div>
            <div class="grid-75">
                <nav> <a href="#" class="active">Home</a>
 <a href="#">About</a>
 <a href="#">Blog</a>
 <a href="#">Support</a>
 <a href="#">Contact</a>
 <a id="order-now" class="btn order">Order now</a>

                </nav>
            </div>
            <div class="grid-20 fixed"> <a class="toggle" id="t">=</a> 
            </div>
        </div>
    </header>
    <nav class="menu" id="m"> <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Blog</a>
 <a href="#">Support</a>
 <a href="#">Contact</a>

    </nav>
    <div id="intro-js" class="intro">
         <h1>Welcome to Title.</h1>

        <p>Bear claw carrot cake candy lollipop topping soufflé lollipop gummi bears jelly.</p>
    </div>
    <div class="notice cf"> <a class="arrow-border" id="fall-dwn"><figure class="arrow-center"></figure></a>

    </div>
</section>
<section id="begin" class="section comenzar">
    <div class="container">
         <h2>What's Included in our $10 Package</h2>

        <ul class="feats cf">
            <li class="grid-33 feat fixed">
                <img class="feat-img" src="./img/calendar.svg" alt="" />
                 <h3>Registered for 12 Months</h3>

                <p>This is some dummy text for Registered for 12 Months. It can be short, or it can be long. It's recommended to keep it concise.</p>
            </li>
            <li class="grid-33 feat fixed">
                <img class="feat-img" src="./img/hand.svg" alt="" />
                 <h3>Quick and Easy Installation</h3>

                <p>Thorough installation guides that anyone can understand, making getting iOS on your device very easy on your end.</p>
            </li>
            <li class="grid-33 feat fixed">
                <img class="feat-img" src="./img/watch.svg" alt=""...

CSS

@import url(http://matthewkosloski.me/reset.css);
 html {
    color: #525252;
    font: 100%/1.5"Proxima Nova 400", "Helvetica Neue", "Lucida Grande", "Arial", sans-serif;
    font-weight: 400;
}
::-moz-selection {
    background: #fed289;
    text-shadow: none;
}
::selection {
    background: #fed289;
    text-shadow: none;
}
hr {
    display: block;
    margin: 1em 0;
    padding: 0;
    height: 1px;
    border: 0;
    border-top: 1px solid #e2e2e2;
}
audio, canvas, img, video {
    vertical-align: middle;
}
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}
textarea {
    resize: vertical;
}
.cf:before, .cf:after {
    display: table;
    content:" ";
}
.cf:after {
    clear: both;
}
/* ==========================================================================
   Typography
   ========================================================================== */
 h1 {
    margin: 0 0 30px 0;
    font-size: 2.250em;
}
h2 {
    margin: 0 0 0.5em 0;
    font-size: 1.625em;
}
h3 {
    margin: 0 0 0.5333333em 0;
    font-size: 1.250em;
}
h4 {
    margin: 0 0 1.2em 0;
    font-size: 1em;
}
h5 {
    margin: 0 0 20px 0;
    font-size: 0.875em;
}
h6 {
    margin: 0 0 20px 0;
    font-size: 0.750em;
}
/* ==========================================================================
   Hero/Header/Nav
   ========================================================================== */
 .home-splash {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    background: url("http://www.matthewkosloski.me/hero-3a.jpg") center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-background-size: cover;
}
.about-splash {
    position: relative;
    display: table;
    width: 100%;
    height: 75vh;
    background: url("../img/about.jpg") center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
   ...