JSFiddle - React, Tailwind, and code Playground

by bradleytrager

HTML

<div id="masthead">
    <div class="row bgd-white">
        <div class="col-md-12"><a class="mob-menu" href="#offcanvas">&#9776;</a>
            <h1>Title</h1>
        </div>
    </div>
</div>
<div id="navigation">
    <div class="chunk-nav-hrz-fxd" data-nav-fxd="200">
        <nav><a>Link1</a><a>Link2</a><a>Link3</a><a>Link4</a>
        </nav>
        <nav class="nav-right"><a>Link5</a><a>Link6</a>
        </nav>
    </div>
</div>
<div class="container bgd-white">
    <div class="row spc-pad-vrt">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

CSS

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.img-rounded {
    border-radius: 6px;
}
.img-thumbnail {
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: auto;
}
.img-circle {
    border-radius: 50%;
}
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 22px;
    padding-right: 22px;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 22px;
    padding-right: 22px;
}
.row {
    margin-left: -22px;
    margin-right: -22px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 22px;
    padding-right: 22px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10,...

JavaScript

$(document).ready(function () {


    //Baseline fixes
    var getBaseline = $("<p class='baseline'></p>").hide().appendTo("body");
    var baseline = getBaseline.css("line-height").replace(/[^-\d\.]/g, '');
    getBaseline.remove();

    $("ul, ol").each(function () {
        var elem = $(this);
        if (elem.children("li").length % 2 != 0) {
            $(this).style('margin-bottom', baseline * 1.5 + 'px')
        }
    });



    //Smart resize
    (function ($, sr) {

        var debounce = function (func, threshold, execAsap) {
            var timeout;

            return function debounced() {
                var obj = this,
                    args = arguments;

                function delayed() {
                    if (!execAsap) func.apply(obj, args);
                    timeout = null;
                };

                if (timeout) clearTimeout(timeout);
                else if (execAsap) func.apply(obj, args);

                timeout = setTimeout(delayed, threshold || 100);
            };
        }

        jQuery.fn[sr] = function (fn) {
            return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
        };

    })(jQuery, 'smartresize');



    //Sticky and off canvas navigation
    $('.chunk-nav-hrz-fxd').addClass('chunk-nav-hrz-fxd-off');

    var navFxd = $('.chunk-nav-hrz-fxd')
    var navFixedHeight = navFxd.attr('data-nav-fxd')
    var navWidth = 0;

    $(window).bind('scroll', function () {
        var navHeight = $(window).height() - navFixedHeight;
        if ($(window).scrollTop() > navHeight && (navFxd.length) == 1) {
            navFxd.prependTo($('body'));
            navFxd.addClass('chunk-nav-hrz-fxd-on').removeClass('chunk-nav-hrz-fxd-off');
        } else {
            if ($('.chunk-nav-hrz-fxd-on').length == 1) {
                navFxd.prependTo($('#navigation'));
                navFxd.removeClass('chunk-nav-hrz-fxd-on').addClass('chunk-nav-hrz-fxd-off');
            }
        }
    });

   ...