JSFiddle - React, Tailwind, and code Playground

HTML

<body>





<!-- N A V I G A T I O N -->

<div class="border top"></div>
<div class="border bottom"></div>
<div class="border left"></div>
<div class="border right"></div>
<button class="c-hamburger c-hamburger--htx" id="show_Me"> <span>toggle menu</span></button>
<nav id="testMenu" style="display:none;">
    <ul id="blueMenu">
        <li><a href="project_01.htm" target='_blank'>PROJECTS</a></li>
        <li><a href="#" data-target="about">ABOUT</a></li>
        <li><a href="">SERVICE</a></li>
        <li><a href="">CONTACT</a></li>
    </ul>
</nav>

<!-- NAVIGATION ENDS HERE -->



<!-- C O N T A C T -->
<div id="contact">

        <div id="image"></div>

        <div class="contact_Me">

            <div id="contact_Me_Title_Wrapper">
            <h3 id="contact_Me_Title"><span>CONTACT ME</span></h3>
            </div>
            <div id="contact_Me_Row1">

                <div id="contact_Me_Row1_A">
                    <h3 class="contact_Me_Line"><div class="box_Svg"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
                    <g id="email">
                        <path id="at" fill="#B6B69C" d="M7.709,0c3.604,0,7.179,2.614,7.179,6.735c0,2.677-1.51,4.42-3.554,4.42
                            c-0.963,0-1.788-0.394-2.225-1.145c-0.521,0.641-1.355,1.145-2.462,1.145c-1.707,0-2.451-1.223-2.451-2.989
                            c0-2.484,1.48-4.518,4.264-4.518c0.569,0,1.311,0.087,1.898,0.219L9.882,8.161c-0.14,1.083,0.392,1.859,1.406,1.859
                            c1.4,0,2.261-1.47,2.261-3.263c0-3.03-2.481-5.475-5.823-5.475c-3.53,0-6.173,2.764-6.173,6.187c0,3.522,2.795,6.175,6.169,6.175
                            c1.008,0,2.047-0.24,2.826-0.645l0.491,1.154c-1.032,0.499-2.154,0.788-3.365,0.788c-4.103,0-7.437-3.336-7.437-7.459
                           ...

CSS

@charset "UTF-8";

/* Limited reset */
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;
	font: inherit;
	}


/* html5 display rule */
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}


/* micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
/* For modern browsers */
.cf:before, .cf:after {
	content:"";
	display:table;
}

.cf:after {
	clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
	zoom:1;
}
/* For IE 6/7 (trigger hasLayout) ends here */

a {
  text-decoration: none;
}

html {
  height: 100%;
  /* stops horizontal scroll overflow */
  overflow-x: hidden;
}	

body {

  height: 100%;
  text-align: center;
  background: white;
  /* stops horizontal scroll overflow */
  overflow-x: hidden;
  
}

/* Body border */

body {
    padding: 0px;
}

.border {
    position: fixed;
    background: #f9f8f3;
}

.top, .bottom {
    left: 0;
    right: 0;
    height: 50px;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

.right, .left {
    top: 0;
    bottom: 0;
    width: 50px;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

/* End of -->> Body border */




/* Hamburger menu icon */

 .c-hamburger {
    display: block;
    z-index: 90000;
    position: fixed;
    left: 0px;
    bottom: 0px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    font-size: 0;
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}

.c-hamburger:focus {
    outline: none;
}

.c-hamburger span {
   ...

JavaScript

(function () {

    "use strict";

    var toggles = document.querySelectorAll(".c-hamburger");

    for (var i = toggles.length - 1; i >= 0; i--) {
        var toggle = toggles[i];
        toggleHandler(toggle);
    };

    function toggleHandler(toggle) {
        toggle.addEventListener("click", function (e) {
            e.preventDefault();
            (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") || $("#testMenu").fadeOut(300) : this.classList.add("is-active") || $("#testMenu").fadeIn(300);
        });
    }

})();