JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <nav class="menu">
    <input id="menu-button" type="checkbox" href="#" checked="checked" class="menu-button"/>
    <label for="menu-button" class="menu-button-icon">
	    <span class="hamburger hamburger-bar-1"></span>
	    <span class="hamburger hamburger-bar-2"></span>
	    <span class="hamburger hamburger-bar-3"></span>
    </label>
    <a href="#" class="menu-item">
    	<i class="fa fa-twitter"></i>
    </a>
    <a href="#" class="menu-item">
    	<i class="fa fa-rss"></i>
    </a>
    <a href="#" class="menu-item">
    	<i class="fa fa-instagram "></i>
    </a>
      <a href="#" class="menu-item">
    	<i class="fa fa-instagram "></i>
    </a>
      <a href="#" class="menu-item">
    	<i class="fa fa-instagram "></i>
    </a>
      <a href="#" class="menu-item">
    	<i class="fa fa-instagram "></i>
    </a>
      <a href="#" class="menu-item">
    	<i class="fa fa-instagram "></i>
    </a>
  </nav>

CSS

<style type="text/css">
	*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  background: #fce4ec;
}
.menu {
  position: absolute;
  left: 50%;
  top: 42.5%;
  transform: translate(0, -50%);
}
/* ------------------------- Separate line ------------------------- */
.menu {
  font-size: 20px;
  width: 380px;
  height: 250px;
  margin-left: -190px;
  margin-top: 5em;
  padding-left: 190px;
  padding-top: 20px;
}
.menu-button {
  display: none;
}
.menu-button:checked + .menu-button-icon {
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transition-duration: 0.2s;
  transition-timing-function: linear;
}
.menu-button:checked + .menu-button-icon > .hamburger-bar-1 {
  transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-button:checked + .menu-button-icon > .hamburger-bar-2 {
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-button:checked + .menu-button-icon > .hamburger-bar-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu-button:checked ~ .menu-item {
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-button:checked ~ .menu-item:nth-of-type(1) {
  transition-duration: 0.18s;
  transform: translate3d(0px, -105px, 0);
  background: #088dc5;
}
.menu-button:checked ~ .menu-item:nth-of-type(2) {
  transition-duration: 0.28s;
  transform: translate3d(90.93266742px, -52.5px, 0);
  background: #ca6615;
}
.menu-button:checked ~ .menu-item:nth-of-type(3) {
  transition-duration: 0.38s;
  transform: translate3d(90.93266742px, 52.5px, 0);
  background: #673f0b;
}
.menu-button:checked ~ .menu-item:nth-of-type(4) {
  transition-duration: 0.48s;
  transform: translate3d(0px, 105px, 0);
  background: #0a4785;
}
.menu-button:checked ~ .menu-item:nth-of-type(5) {
  transition-duration: 0.58s;
  transform: translate3d(-90.93266742px, 52.5px, 0);
  background: #24680f;
}
.menu-button:checked ~ .menu-item:nth-of-type(6) {
  transition-duration: 0.68s;
  transform: translate3d(-90.93266742px, -52.5px, 0);
  background:...