JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<link rel="stylesheet" href="stylesheet&quot; href=&quot;path/to/font-awesome/css/font-awesome.min.css">
<script src="https://use.fontawesome.com/7bf72dcdd2.js"></script>
<div>
  <nav class='std'>
    <div class='shadow'></div>
    <ul>
      <li>
        <div class='content'>
          <div class='text'>
            <span class='pw-logo-blue'>Patient</span><span class='pw-logo-purple'>Wisdom</span>
          </div><div class='vertical-mid-hack'></div>
        </div>
      </li>
      <li>
        <div class='content'>
          <div class='text'>
            My Stories
          </div><div class='vertical-mid-hack'></div>
        </div>
      </li>
      <li class='right'>
        <div class='content'>
          <div class='text'>
            <div class='hamburger'>
              <div class='line'></div>
              <div class='line'></div>
              <div class='line'></div>
            </div>
          </div><div class='vertical-mid-hack'></div>
        </div>
      </li>
    </ul>
  </nav>
  <nav class='horizontal dark blue'>
    <div class='shadow'></div>
    <ul>
      <li class='selected'>
        <!-- <div class='indicator'></div> -->
        <div class='content'>
          <div class='icon'>
           <i class="fa fa-comments-o fa-lg" aria-hidden="true"></i>
           <!-- <i class="fa fa-comments" aria-hidden="true"></i> -->
          </div>
          <label>
            Stories
          </label>
        </div>
      </li>
      <li>
        <!-- <div class='indicator'></div> -->
        <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>
        <!-- <div class='indicator'></div> -->
        <div class='content'>
          <div class='icon'>
            <i class="fa fa-cogs fa-lg" aria-hidden="true"></i>
            <!-- <i class="fa fa-cog fa-lg"...

SCSS

html, body {
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  color: #3B3B3B;
}
span {
  margin: 0;
}
.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;
}

.container {
  display: inline-block;
  padding: 10px;
  background-color: white;
  position: relative;
  
  .title {
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
  }
}
.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 #ddd;
  background-color: white;
  
  .shadow {
    box-shadow: 0 2px 10px 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: 1px solid #1D252E; 
    color: #eee;
    
    &.dark {
      &.blue {
        background-color: #334057;
        background-color: #34435C;
      }
      &.gray {
        background-color: #353C4A;
      }
      &.purple {
        background-color: #3D2B45;
      }
      &.white-blue {
        background-color: #34435C;
      }
    }
    &.light {
      &.blue {
        
        border-color: #CCD5E8;
        background-color: #EDF2FA;
 ...

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').on('click', function() {
  	$('.selected').removeClass('selected');
    $(this).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);
  });
});

function removeExtraClasses(newClass, element, map) {
	var extraClasses = map[newClass];
	for(var i = 0; i < extraClasses.length; i++) {
  	var extraClass = extraClasses[i];
    $(element).removeClass(extraClass);
  }
}