JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<nav>
  <ul>
    <li><i class="bar">&nbsp;</i><span>BOOKINGS</span></li>
    <li><i class="bar">&nbsp;</i><span>DRIVERS</span></li>
    <li><i class="bar">&nbsp;</i><span>PASSENGERS</span></li>
    <li><i class="bar">&nbsp;</i><span>USERS</span></li>
  </ul>
</nav>

Babel + JSX

const body = document.body;
const nav = document.querySelector('nav');
const list = document.querySelector('ul');
const items = document.querySelectorAll('li');
const spans = document.querySelectorAll('li > span');
const bars = document.querySelectorAll('li > .bar');
const timelines = [];
const timeline = new TimelineMax({ paused: true });

TweenMax.set(body, {
	fontSize: 10,
  fontFamily: 'Verdana',
  letterSpacing: '1px',
	margin: 0,
  overflow: 'hidden',
  padding: 0,
  webkitFontSmoothing: 'antialiased'
});

TweenMax.set(nav, {
	//backgroundColor: '#575757',
  //backgroundColor: '#505156',
  backgroundColor: '#444',
  color: '#fff',
	height: window.innerHeight,
	position: 'absolute',
  width: 200
});

TweenMax.set(list, {
	listStyle: 'none',
  margin: 0,
  padding: 0,
  position: 'absolute'
});

TweenMax.set(items, {
	//backgroundColor: '#69686d',
  backgroundColor: '#505050',
  borderBottomColor: '#444',
  borderBottomStyle: 'inset',
  borderBottom: 2,
	height: 40,
  width: 200
});

TweenMax.set(spans, { display: 'inline-block', marginLeft: 16, marginTop: 12 });
TweenMax.set(bars, { height: 40, position: 'absolute', width: 2, transformOrigin: '0 0', force3D: false });
TweenMax.set(bars[0], { backgroundColor: '#791E94' });
TweenMax.set(bars[1], { backgroundColor: '#E71D36' });
TweenMax.set(bars[2], { backgroundColor: '#56A902' });
TweenMax.set(bars[3], { backgroundColor: '#2EC4B6' });

_.each(items, (item, index) => {
	timelines[index] = new TimelineMax({ paused: true });
	/*timelines[index].to(item.querySelector('.bar'), 0.3, {
  	scaleX: 3,
    ease: Power2.easeOut
  }, 0);*/
  timelines[index].to(item, 0.3, {
  	backgroundColor: '#69686d',
    ease: Power2.easeOut
  }, 0);
	item.addEventListener('mouseover', () => {
  	timelines[index].play();
  });
  item.addEventListener('mouseout', () => {
  	timelines[index].reverse();
  });
});