JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/maquette/1.6.0/maquette.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

CSS

#popup{
    width: 500px;
    height: 500px;
    border-radius:10px;
    background-color: blue;
}

JavaScript

var h = maquette.h;

var isPopupShown = false;

var showPopup = function(){
 isPopupShown = !isPopupShown;   
}

var fadeIn = function(element) {
  element.style.opacity = 0;
  Velocity.animate(element, {opacity: 1}, 1500, "ease-out");
};

var renderMaquette = function () {
  return h("div#container", {
    onclick: showPopup
  }, [
    h("button", ["Click me"]),
      isPopupShown ? h("div#popup", {enterAnimation: fadeIn}) : null
  ]);
}

// Initializes the projector 
maquette.createProjector(document.body, renderMaquette);