JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.57.1/css/patternfly-additions.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/js/patternfly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"></script>
<nav class="navbar navbar-pf-vertical navbar-pf-contextselector">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="/" class="navbar-brand">
      <img class="navbar-brand-icon" src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.57.1/img/logo-alt.svg" alt=""/>
      <img class="navbar-brand-name" src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.57.1/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
    </a>
    <div class="nav contextselector-pf">
      <div class="btn-group bootstrap-select">
      <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="Acme Corp." aria-expanded="false">
        <span class="filter-option pull-left">Acme Corp.</span>&nbsp;<span class="bs-caret"><span class="caret"></span>
        </span>
      </button>
        <div class="dropdown-menu open"...

JavaScript

$(document).ready(function() {
  $('html').addClass('layout-pf layout-pf-fixed transitions');
  $('body').addClass('cards-pf');
});

$(document).ready(function() {
  // matchHeight the contents of each .card-pf and then the .card-pf itself
  $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
  $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
  $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
  $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();

  // Initialize the vertical navigation
  $().setupVerticalNavigation(true);
});

$(document).ready(function() {
  // Initialize to unread notifications
  // TODO: add badge for unread notifications

  // Show/Hide Notifications Drawer
  $('.drawer-pf-trigger').click(function() {
    var $drawer = $('.drawer-pf');

    $(this).toggleClass('open');
    if ($drawer.hasClass('hide')) {
      $drawer.removeClass('hide');
      setTimeout(function() {
        if (window.dispatchEvent) {
          window.dispatchEvent(new Event('resize'));
        }
        // Special case for IE
        if ($(document).fireEvent) {
          $(document).fireEvent('onresize');
        }
      }, 100);
    } else {
      $drawer.addClass('hide');
    }
    // Special case, close navigation menu in mobile mode
    if ($('.container-pf-nav-pf-vertical').hasClass('hidden-nav')) {
      $('.nav-pf-vertical').removeClass('show-mobile-nav');
    }
  });
  $('.drawer-pf-close').click(function() {
    var $drawer = $('.drawer-pf');

    $('.drawer-pf-trigger').removeClass('open');
    $drawer.addClass('hide');
  });
  $('.drawer-pf-toggle-expand').click(function() {
    var $drawer = $('.drawer-pf');
    var $drawerNotifications = $drawer.find('.drawer-pf-notification');

    if ($drawer.hasClass('drawer-pf-expanded')) {
      $drawer.removeClass('drawer-pf-expanded');
      $drawerNotifications.removeClass('expanded-notification');
    } else {
     ...