JSFiddle - React, Tailwind, and code Playground

Fliplet Hamburger Menu

by Hugo Carneiro

CSS

/* Preview & App */
.viewport > .viewport-header .nav-title {
  position: absolute;
  right: 5px;
  margin: 0;
  padding: 0;
  width: 55px;
  height: 55px;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  color: #333; /* Change this color to change color of the burger lines */
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 55px;
  -webkit-font-smoothing: antialiased;
}

.viewport > .viewport-header .nav-title:before {
  content: "\e236";
}

.viewport > .viewport-header .nav-title:after {
  display: none;
}

.viewport > .viewport-header .nav-title span {
  display: none;
}

.viewport > .viewport-header .nav-right {
  display: none;
}

/* Menu overlay */
.menu-panel:before {
  border-color: transparent;
  border-top: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  border-left:7px solid transparent;
  top: -14px;
  left: 95.5%;
}

@media (min-width:413px) {
    .menu-panel:before {
        border-top: 11px solid transparent;
        border-right: 11px solid transparent;
        border-bottom: 11px solid #fff;
        border-left: 11px solid transparent;
        top: -22px;
    }
}

@media (min-width:640px) {
    .menu-panel {
        right: 25px;
        left: auto;
    }
}