JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<link rel="stylesheet" href="https://blogs.getty.edu/docents2018/wp-content/themes/bulmapress-master/frontend/bulmapress/bulma.css">
<div id="app">
  <header class="type-system-sans">
    <nav class="navbar">
      <div class="navbar-brand"><a href="https://www.getty.edu/" target="_blank" class="navbar-item"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/gettylogo.svg"></a>
        <div class="navbar-item site-search site-search-mobile">
          <input type="checkbox" id="hidden-check" style="display: none;"> <a href="#" id="open-search" class="open-search"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_search.svg" alt="submit"></a>
          <form role="search" method="get" action="https://blogs.getty.edu/docents2018" name="form" class="search-form">
            <input type="search" placeholder="Enter keyword(s)" name="s" id="sM" title="Search for:" class="search-field">
            <button type="submit" style="border: 0px; background: transparent;"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_search_blue.svg" alt="submit"></button>
          </form>
          <a href="#" class="close-search"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_close.svg" alt="submit"></a></div>
        <div data-target="navbarExampleTransparentExample" class="navbar-burger burger" :class="{'is-active':this.active}" v-on:click="toggleMenu()"><span></span> <span></span> <span></span></div>
      </div>
      <div id="navbarExampleTransparentExample" class="navbar-menu" :class="{'is-active':this.active}">
        <div class="navbar-start"><a href="https://blogs.getty.edu/docents2018/" class="navbar-item active">Docent Home</a><a href="https://blogs.getty.edu/docents2018/calendar-shifts/" class="navbar-item in-active-tree">Calendar and Shifts</a>
          <div target="_blank"...

CSS

/* navbar */

.navbar.is-fixed-top.is-signed-in {
  top: 32px
}

.navbar {
  min-height: 50px !important;
  max-height: 50px
}

.navbar,
.navbar .navbar-menu {
  background-color: #386f8c
}

.navbar .navbar-menu .navbar-end .sign-in {
  margin-right: .5rem
}

.navbar .navbar-brand {
  padding: 0;
  margin: 0;
  min-height: 50px;
  max-height: 50px;
  background-color: #386f8c
}

.navbar .navbar-brand a.navbar-item {
  padding: 0;
  margin-right: 12px;
  min-height: 50px;
  max-height: 50px;
  background: none;
  background-color: #386f8c
}

.navbar .navbar-brand a.navbar-item:hover {
  background-color: #386f8c
}

.navbar .navbar-brand .navbar-burger span {
  color: #fff
}

.navbar .navbar-brand .navbar-item {
  padding: 0;
  margin: 0
}

.navbar .navbar-brand .navbar-item img {
  height: 100%;
  width: 100%;
  max-height: 50px;
  max-width: 50px;
}

.navbar .navbar-dropdown {
  padding: 0;
  border-top: none;
}

.navbar .navbar-dropdown a.navbar-item {
  margin: 0;
  font-size: .75rem;
  font-weight: 100;
  color: #fff;
  border-radius: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #fff;
}

.navbar .navbar-dropdown a.navbar-item:hover {
  background-color: #32627b;
  color: #fff
}

.navbar a.navbar-item,
div.navbar-end>div.navbar-item>a>span {
  margin: 5px 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  margin-right: 5px;
}

.navbar a.navbar-item:hover,
a.navbar-item.active {
  background-color: #32627b;
}

@media screen and (max-width:1145px) {
  #navbarExampleTransparentExample {
    background-color: #55a0c8;
  }
  .navbar .navbar-dropdown a.navbar-item {
    font-size: 14px;
    font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif
  }
  .navbar a.navbar-item,
  div.navbar-end>div.navbar-item>a>span {
    font-size: 16px;
    font-family: Univers LT W01_65 Bold1475968, Helvetica, Arial, Sans-Serif;
  }
  .navbar.is-fixed-top.is-signed-in {
    top: 46px
  }
 ...

JavaScript

window.onload = function() {
  var burger = document.querySelector('.burger');
  burger.addEventListener('click', function(event) {
    console.log('here')
    document.getElementById('app').classList.toggle('slide-left');
    document.querySelector('.burger').classList.toggle('is-active');
    document.getElementById('navbarExampleTransparentExample').classList.toggle('is-active');
  });
};