JSFiddle - React, Tailwind, and code Playground

by TsarS

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
  <div class="grid__container grid__header">
     <div class="grid__logo--header">
        <h3>
        Site.com
        </h3>
     </div>
     <div class="grid__menu">
       <i class="material-icons md-48 menu__button">dashboard</i>
     </div>
  </div>
  <div class="grid__container grid__main index-page__text">
  
  </div> 
  <div class="grid__container grid__footer">
  footer
  </div>
  
</body>

CSS

@import ('https://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext');

html,
body {
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;    
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    font-size: 100%;     
    font-weight: 400;
    
}
h3 {
  font-size : 1.45em;
}
.material-icons.md-48 {
    font-size: 48px;    
}
.menu__button {
   color: #ff4081;
}
.menu__button--active {
   color: blue;
}
.grid__container {
    max-width: 960px;
    margin: 0 auto;
}

/* Header */
.grid__header {
    min-height: 64px;
    height: 64px;
    width:100%;
    display: -webkit-flex;
	  display: flex;
    background: transparent;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    justify-content: space-between;
} 
.grid__logo--header {
  padding-left:20px;
}
.grid__menu {}

/* **** */
.grid__main {
  flex :1;
}

JavaScript

var activeModificator = '--active';
    var menu_button = document.querySelector(".menu__button" || ".menu__button--active");   
    menu_button.onclick =function() {
    toggle('.menu__button');     
            };
    
    
    function toggle (className, active) {
    var name = className.replace(/\./g, '');
    var activeName = (active === undefined) ? activeModificator : active;
 
     if (name.indexOf(activeName) == -1) {    
   
      document.querySelector(className).classList.add(name+activeModificator);
      document.querySelector(className).classList.remove(name);
      console.log(menu_button);
     
      } else {
    
    document.querySelector(className).classList.add(name);
    document.querySelector(className).classList.remove(name-activeModificator);
     } 
    }