JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<script src="https://use.fontawesome.com/7bf72dcdd2.js"></script>
<div class='hundred-percent'>
  <div class='overlay overlay-closer'></div>
  <nav class='drawer'>
    <div class='shadow'></div>
    <header>
      <div class='content'>
        <div class='control-icon-box overlay-closer'>
          <div class='control-icon'>
            <i class="fa fa-times" aria-hidden="true"></i>
          </div>
          <label>
            Close
          </label>
        </div>
      </div>
      <div class='content'>
        <div class='control-icon-box'>
          <div class='control-icon'>
            <i class="fa fa-question" aria-hidden="true"></i>
          </div>
          <label>
            Help
          </label>
        </div>
      </div>
    </header>
    <ul>
      <li class='selected clickable stories'>
        <div class='content'>
          <div class='icon'>
            <i class="fa fa-comments-o fa-lg" aria-hidden="true"></i>
          </div>
          <label>
            Stories
          </label>
        </div>
      </li>
      <li class='clickable insight'>
        <div class='content'>
          <div class='icon'>
            <i class="fa fa-street-view fa-lg" aria-hidden="true"></i>
          </div>
          <label>
            inSIGHT
          </label>
        </div>
      </li>
      <li class='clickable settings'>
        <div class='content'>
          <div class='icon'>
            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
          </div>
          <label>
            Settings
          </label>
        </div>
      </li>
    </ul>
    <footer>
      <div class='content'>
        <label>
          Privacy Policy
        </label>
      </div>
      <div class='content'>
        <label>
          Terms of Use
        </label>
      </div>
    </footer>
  </nav>
  
  <nav class='std'>
    <div class='shadow'></div>
    <ul>
      <li>
        <div class='content'>
          <div class='text'>
            <span...

SCSS

html, body {
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  color: #3B3B3B;
  height: 100%;
  overflow: hidden;
}
span {
  margin: 0;
}
.close-icon {
  transform: rotate(45deg);
}
.hundred-percent {
  height: 100%;
}
.vertical-mid-hack {
  display: inline-block;
  height: 100%;
  width: 1px;
  vertical-align: middle;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 2px 0;
  opacity: 0.5;
  z-index: -1;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 90;
}
.select-box {
  width: 250px;
  margin: 7px;
  
  label {
    display: inline-block;
    width: 45%;
    margin-right: 5px;
  }
  select {
    display: inline-block;
    width: 45%;
  }
}
.pw-logo-blue {
  color: #2f89d7;
}
.pw-logo-purple {
  color: #97459a;
}

.content {
  width: 95%;
  max-width: 1000px;
  margin: 0 auto;
  height: 100%;
}

.page-section {
  padding: 30px 0;
}

nav {
  
  position: relative;
  border-bottom: 1px solid #5C626E;
  background-color: white;
  
  .shadow {
    box-shadow: 0 1px 7px 0;
    z-index: -1;
  }
  
  ul {
    margin: 0 auto;
    padding: 0;
    max-width: 1000px;
    width: 95%;
    list-style: none;
    display: flex;

    li {
      flex-grow: 0;
      padding: 10px 10px 9px 10px;
      text-align: center;
      
      .content {
        width: auto;
      }
      
      &:first-of-type {
        padding-left: 0;
      }

      &:selected {

      }
    }
  }
}

nav {
  
  &.horizontal {
    border-bottom: none; 
    
    border-color: #767D8A;
    background-color: #F5F7FA;
    color: #3B3B3B;

    ul {
      margin: 0 auto;
      max-width: 1000px;
      padding: 0;
      list-style: none;
      display: flex;

      li {
        
        position: relative;
        padding: 12px 17px;
        text-align: center;
        border-right: 1px solid #C5C9D1;
        transition: all 0.15s ease;
  ...

JavaScript

// https://d30y9cdsu7xlg0.cloudfront.net/png/25718-200.
var colorMap = {
	'blue': [
  	'gray', 'purple', 'white-blue', 'white'
  ],
  'gray': [
  	'blue', 'purple', 'white-blue', 'white'
  ],
  'purple': [
  	'blue', 'gray', 'white-blue', 'white'
  ],
  'white-blue': [
  	'blue', 'gray', 'purple', 'white'
  ],
  'white': [
    'blue', 'gray', 'purple', 'white-blue'
  ]
};
var themeMap = {
	'dark': ['light'],
  'light': ['dark'],
};
var iconColorMap = {
	'blue': [
  	'purple', 'gold', 'green',
  ],
  'purple': [
  	'blue', 'gold', 'green',
  ],
  'gold': [
  	'blue', 'purple', 'green',
  ],
  'green': [
  	'blue', 'purple', 'gold',
  ]
}
$(function() {
	$('li.clickable').on('click', function() {
  	$('.selected').removeClass('selected');
    var itemClass = findClass(this);
    $('.' + itemClass).addClass('selected');
  });
  $('.color-options').on('change', function() {
  	var val = $(this).val();
    var navbar = $('nav.horizontal');
    removeExtraClasses(val, navbar, colorMap);
  	$(navbar).addClass(val);
  });
  $('.theme-options').on('change', function() {
  	var val = $(this).val();
    var navbar = $('nav.horizontal');
    removeExtraClasses(val, navbar, themeMap);
  	$(navbar).addClass(val);
  });
  $('.icon-color-options').on('change', function() {
  	var val = $(this).val();
    var icon = $('nav.horizontal').find('i');
    removeExtraClasses(val, icon, iconColorMap);
  	$(icon).addClass(val);
  });
  $('.hamburger').on('click', function() {
  	$('.overlay').fadeIn();
    $('nav.drawer').addClass('visible');
  });
  $('.overlay-closer').on('click', function() {
  	$('.overlay').fadeOut();
    $('nav.drawer').removeClass('visible');
  });
});

function findClass(element) {
	var classes = $(element).attr('class').split(' ');
  for(var i = 0; i < classes.length; i++) {
  	var tempClass = classes[i];
    if(tempClass === 'stories' || tempClass === 'insight' || tempClass === 'settings') {
    	return tempClass;
    }
  }
}

function...