JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/fa-header@1.0.6"></script>
<div id="app">
  <fa-header :width="1200" :breakpoint="800" :sticky="-100">
    <div class="logo">FA Header</div>
    
    <fa-search :breakpoint="800" iconsticky class="search">
      <form method="post">
        <input type="text" name="search" placeholder="Search by keyword" />
        <button>Search</button>
      </form>
    </fa-search>
    
    <fa-navigation :breakpoint="800" burgersticky>
      <fa-megamenu feed="https://unpkg.com/fa-header/example.json"></fa-megamenu>
    </fa-navigation>
  </fa-header>
  <div class="content">
  </div>
</div>

CSS

nzime-header {
  display: none;
}
header {
  background: #fff;
}
.header__content {
  display: flex;
  flex-wrap: wrap;
}
.header__content .search {
  margin-left: auto;
}
.nav { 
  width: 100%;
  margin-top: 20px;
  position: relative;
}
.nav__bar {
  background: darkblue;
}
.nav__wrapper {
  background: rgba(0,0,0,.3);
}
.nav__container {
  background: white;
}
.nav__megamenu__item {
  display: block;
  padding: 10px;
  color: white;
}
.nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  display: block;
  width: 150px;
  padding: 5px 10px;
}
.nav__megamenu__dropdown {
  background: white;
  left: 0;
  right: 0;
  top: 100%;
}
.content {
  height: 1500px;
  border: 2px solid;
}
.header--sticky .header__wrapper {
  background: white;
  padding: 10px;
}
.header--sticky .nav {
  width: auto;
  margin-top: 0;
}

JavaScript

new Vue({
  el: '#app',
  data: {
  }
});