JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="fl-viewport-header ">
  <span class="nav-title">
      <span>Page Title</span>
  </span>
  <div class="nav-right" data-fl-toggle-menu=".fl-menu">
    <div class="hamburger hamburger--slider">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://cdn.api.fliplet.com/sdk.js?packages=fliplet-studio-ui&auth_token=eu--session--62f857380bfd060a881a1c01393bf9cf-262-819-4876"></script>

CSS

/* BUG */

#overlay-about-app {
  display: none;
}

/* MENU */

.fl-viewport-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  margin: 0 auto;
  line-height: 43px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 #fff;
  border-bottom: 1px solid rgba(127, 127, 127, 0.1);
  font-weight: 300;
  width: 100%;
  z-index: 10;
  text-align: center;
  color: #333;
  font-size: 1em;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.fl-viewport-header .nav-title {
  display: block;
  margin: 0 18.5%;
  text-align: center;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fl-viewport-header .nav-right {
  position: absolute;
  top: 0;
  height: 43px;
  cursor: pointer;
  right: 0;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hamburger {
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  padding: 0;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  display: flex;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: #333333;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger--slider .hamburger-inner {
 ...

JavaScript

Fliplet().then(function() {

});