JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<!-- nav -->
<nav class="sidebar">
  <div class="nav-header">
    <div class="logo-wrap">
      <a class="logo-icon" href="http://www.mediahawkz.com/"><img alt="logo-icon" src="http://mediahawkz.com/assets/images/favicons/apple-icon-72x72.png" width="40"></a>
      <a class="logo-text" href="http://www.mediahawkz.com/">MediahawkZ</a>
    </div>

    <div class="nav-search">
      <div class="search">
        <i class="material-icons">search</i>
        <input type="search" name="search" placeholder="Search">
      </div>
    </div>
  </div>
  <ul class="nav-categories ul-base">
    <li><a href="http://www.mediahawkz.com/topic/technology">Technology</a></li>
    <li><a href="http://www.mediahawkz.com/topic/science">Science</a></li>
    <li><a href="http://www.mediahawkz.com/topic/speak-up">Speak up</a></li>
    <li><a href="http://www.mediahawkz.com/topic/general">General</a></li>
    <li><a href="http://www.mediahawkz.com/topic/lifestyle">Lifestyle</a></li>
    <li><a href="http://www.mediahawkz.com/topic/world">World</a></li>
    <li><a href="http://www.mediahawkz.com/topic/business">Business</a></li>
    <li><a href="http://www.mediahawkz.com/topic/entertainment">Entertainment</a></li>
    <li><a href="http://www.mediahawkz.com/topic/sports">Sports</a></li>
  </ul>
  <ul class="social ul-base">
    <li><a href="https://twitter.com/MediahawkZ" class="twitter" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="https://www.facebook.com/mediahawkz" class="facebook" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="https://plus.google.com/+MediahawkzIndia" class="google-plus" target="_blank"><i class="fa fa-google-plus"></i></a></li>
    <li><a href="http://www.mediahawkz.com/rss" class="rss" target="_blank"><i class="fa fa-rss"></i></a></li>
  </ul>
  <div class="copyright">
    <span>&copy; 2016 <a href="http://www.mediahawkz.com" class="link">MediahawkZ.com</a> Made in India</span>
    <span>Designed by <a...

SCSS

/* -----------------------------------------------------
  Material Design Mediahawkz.com Fixed & Responsive Header with Sidebar
  CodePen URL: https://codepen.io/rkchauhan/pen/VamPVa
  By: Ravikumar Chauhan
  
  Find me on:-
  * Twitter: https://twitter.com/rkchauhan01
  * Facebook: https://www.facebook.com/ravi032chauhan
  * GitHub: https://github.com/rkchauhan
  * CodePen: https://codepen.io/rkchauhan
  * UpLabs: http://uplabs.com/rkchauhan01

  Thanks to:-
  * Google Material design - https://www.google.com/design/spec/material-design/introduction.html
  * Google Material Color - https://www.google.com/design/spec/style/color.html
  * Google Material Icons - https://design.google.com/icons/
  * Roboto Font - https://google.com/fonts/specimen/Roboto
  * Font Awesome - http://fontawesome.io
  * jQuery - https://jquery.com
-------------------------------------------------------- */
// Body Colors
$body-txt-color: #646360;
$body-bg-color: #eee;
$selection-color: #b3d4fc;
$link-txt-color: #03a9f4;

// Header
$header-bg-color: #3f51b5;

// Social media color
$twitter-color: #00baf0;
$facebook-color: #3b5997;
$google-plus-color: #c43c2c;
$rss-color: #ff6600;

// Dropdown menu
$dd-menu-bg-color: $header-bg-color;

/* -----------------------------------------------------
  Body
-------------------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  color: $body-txt-color;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  background-color: $body-bg-color;
}

*, *::after, *::before {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

::selection {
  background: $selection-color;
  text-shadow: none;
}

a {
  color: $link-txt-color;
  outline: none;
  text-decoration: none;

  &:hover { text-decoration: underline; }
}

.overlay {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.285);
  z-index: 1001;
}

/* For Typography...

JavaScript

$('.dropdown-toggle').on('click', function(e) {
  e.stopPropagation();
  e.preventDefault();

  var self = $(this);
  if(self.is('.disabled, :disabled')) {
    return false;
  }
  self.parent().toggleClass("open");
});

$(document).on('click', function(e) {
  if($('.dropdown').hasClass('open')) {
    $('.dropdown').removeClass('open');
  }
});

$('.nav-btn.nav-slider').on('click', function() {
  $('.overlay').show();
  $('nav').toggleClass("open");
});

$('.overlay').on('click', function() {
  if($('nav').hasClass('open')) {
    $('nav').removeClass('open');
  }
  $(this).hide();
});