JSFiddle - React, Tailwind, and code Playground

HTML

<body onLoad="resettoggle()">
    <script type="text/javascript">
        <!--

        function resettoggle() {
            var e = document.getElementById('header-nav');
            e.style.display = 'none';
        }

        function toggle_visibility(id) {

            var e = document.getElementById(id);

            if (e.style.display == 'none') e.style.display = 'block';
            else e.style.display = 'none';
        }

        function hidewaffle() {
            var w = document.getElementById('waffle').parentNode;
            w.style.display = 'none';
        }

        //-->
    </script>
    <div id="container">
        <!-- BEGIN WRAPPER -->
        <header id="main-header">
            <nav id="icon-header-nav">
<a href="#" class="no_border" onclick="toggle_visibility('header-nav');hidewaffle()"><img  id="waffle" src="http://www.coffeeonmars.com/toggle-tp/images/nav-icon.png" alt="toggle nav icon"></a>

            </nav>
            <nav id="header-nav">
                <ul>
                    <li><a href="javascript:;">search</a>

                    </li>
                    <li><a href="javascript:;">articles</a>

                    </li>
                    <li><a href="javascript:;">categories</a>

                    </li>
                    <li><a href="javascript:;">contact</a>

                    </li>
                </ul>
            </nav>
            <div id="header-logo-group">
<a class="no_border" href="javascript:;"><img src="http://www.coffeeonmars.com/toggle-tp/images/thinkplan-logo.png" width="300" height="60" alt="thinkplan logo"></a>

            </div>
            <!-- END header-logo-group -->
        </header>
        <!-- END main_header -->
        <!-- END HEADER -->
        <!-- BEGIN MIDDLE/CONTENT AREA -->
        <main id="main-area">
            <!-- main-area open tag is in header.php -->
            <div id="content-one">
                <div id="left-col">
                    <div...

CSS

.border-below-1 {
    border:1px solid #000;
    border-width:0 0 1px 0
}
.border-above-1 {
    border:1px solid #000;
    border-width:1px 0 0 0
}
.border-above-2 {
    border:1px solid #000;
    border-width:2px 0 0 0
}
.border-dash-below-1 {
    border:1px dashed #000;
    border-width:0 0 1px 0
}
.border-1 {
    border:1px solid #000
}
.link-dotline-1 {
    color:#000;
    text-decoration:none;
    border:dotted #5f5f5f;
    border-width:0 0 1px 0
}
.link-dotline-hover-1 {
    border:solid #c4232a;
    border-width:0 0 2px 0
}
.container-border-1 {
    border:dotted #5f5f5f;
    border-width:0 1px
}
* {
    margin:0;
    padding:0
}
html {
    box-sizing:border-box
}
*, :before, :after {
    box-sizing:inherit
}
body {
    font-size:100%;
    font-weight:400;
    color:#000;
    font-family:Verdana, Helvetica-neue, Arial, sans-serif
}
a {
    color:#000;
    text-decoration:none;
    border:dotted #5f5f5f;
    border-width:0 0 1px 0
}
a:hover {
    border:solid #c4232a;
    border-width:0 0 2px 0
}
li a {
    border:0
}
p {
    color:#222;
    font-size:.8rem;
    line-height:1.5;
    margin:0 0 1rem 0
}
.lead-in {
    font-size:.9rem
}
#content-one p:last-child {
    border:1px dashed #000;
    border-width:0 0 1px 0;
    padding:0 0 .3rem 0
}
h2 {
    font-size:1.0rem;
    font-weight:700
}
h3 {
    font-size:.8rem;
    font-weight:400;
    font-style:italic;
    margin:0
}
#content-one .date-line {
    font-size:60%;
    font-weight:400;
    margin:0 0 .6rem 0
}
blockquote {
    width:85%;
    background:#f9f9f9;
    padding:2%;
    margin:0 0 2% 5%;
    border:solid #797979;
    border-width:1px 1px 1px 4px;
    border-radius:6px;
    box-shadow:0 0 6px rgba(230, 230, 240, .9);
    font-style:italic;
    font-size:90%;
    line-height:1.6
}
img {
    max-width:100%;
    height:auto
}
.no_border, .no_border:hover {
    border:0
}
#content-one img {
    margin:0 0 .7rem 0;
    border:1px solid #000
}
#container {
    border:dotted #5f5f5f;
   ...

JavaScript

function resettoggle() {
	    var e = document.getElementById('header-nav');
	    e.style.display = 'none';
	}

	function toggle_visibility(id) {

	    var e = document.getElementById(id);

	    if (e.style.display == 'none') e.style.display = 'block';
	    else e.style.display = 'none';
	}

	function hidewaffle() {
	    var w = document.getElementById('waffle').parentNode;
	    w.style.display = 'none';
	}

window.addEventListener('resize', function(e) {
    if(window.innerWidth > 750) {
        resettoggle()
    }
    if(window.innerWidth < 750) {
        document.getElementById('waffle').parentNode.style.display = 'block'
    }
})