JSFiddle - React, Tailwind, and code Playground

by Mark Seymour

HTML

<script src="http://crossborderchallenge.com/js/smooth-scroll.min.js"></script>
<div class="home-hero">
    <div class="jumpdown"><a data-scroll href="#intro">Next</a></div>
</div>

<div id="intro" class="col intro">
    <div class="row">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus erat libero, vehicula sed neque at, congue adipiscing dolor. Etiam mattis libero at eros eleifend bibendum. Fusce porta metus sed aliquet porttitor. Nullam eu mi vehicula, rutrum lorem facilisis, mattis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nec massa a sapien volutpat mattis tempus non neque. Pellentesque vitae pellentesque lacus, ut posuere elit. Vivamus ut leo consequat, scelerisque velit a, varius mauris. Vivamus lobortis mauris vel leo posuere dignissim. Aliquam lacinia mauris vel suscipit mattis. Ut varius nunc vitae elit ullamcorper, eu accumsan lacus blandit. Aenean odio risus, dignissim sit amet gravida vestibulum, ullamcorper eget nulla. Aenean malesuada placerat neque, id ultricies nisl. Vestibulum accumsan ligula vitae odio gravida viverra. Donec neque velit, convallis non malesuada non, interdum ut lacus.</p>
        <p>Etiam risus dui, luctus a neque vel, aliquet viverra nisl. Integer condimentum est magna, sit amet sollicitudin mi eleifend pretium. Sed commodo quam vel leo faucibus, quis aliquam turpis tincidunt. Integer placerat justo vel imperdiet venenatis. Curabitur lacus eros, facilisis non lorem nec, imperdiet sagittis felis. Mauris luctus magna lorem, et commodo lacus placerat eu. Aenean laoreet magna dolor, id hendrerit mi auctor id. Cras vestibulum scelerisque lectus, eget suscipit eros auctor non. Nunc dictum porta dolor. Aliquam scelerisque varius purus at cursus. Nulla orci urna, volutpat in mi semper, iaculis semper dui. Nullam turpis ante, euismod quis augue sed, facilisis tincidunt orci. Vestibulum congue lectus eu enim aliquam gravida. Mauris varius...

SCSS

p { margin: 14pt 0; }

.col { padding: 18pt; }

.home-hero { 
    background-color: #F00;
    position: relative;
    .jumpdown { 
        border-radius: 50%;
        background-color: #FFF;
        position: absolute; 
        width: 44px; 
        height: 44px; 
        margin-left: -22px;
        bottom: 18pt;
        left: 50%;
        a { display: block; width: 100%; height: 100%; }
    }
}

.intro { background-color: #0F0; }

.events { background-color: #00F; color: #FFF; }

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');

smoothScroll.init({updateURL: true});

$(window).on("resize", function () {
  fullScreenSlide();
}).resize();

function fullScreenSlide () {
  var browserheight = Math.round($(window).height());
  $('.home-hero').height(browserheight);
}