JSFiddle - React, Tailwind, and code Playground

HTML

Just some other content.
<a href="#" id="panel">Panel</a>
<a href="#" id="subPanel">SubClassed Panel</a>

CSS

.yui3-subpanel-hidden { display: none; }

JavaScript

YUI().use("panel", "base-build", function(Y) {
    Y.one("body").addClass("yui3-skin-sam");
    var subPanel = Y.Base.create("subpanel", Y.Panel, [], {}, {});

    var panelConfig = {
        render: true,
        centered: true,
        modal: true,
        zIndex: 2,
        width: 400,
        height: 250,
        headerContent: "",
        bodyContent: [
            'Tour content goes here'
            ].join("")
    };
    Y.one("#panel").on("click", function (e) {
        e.preventDefault();
        var instance = new Y.Panel(panelConfig);
    });    
    Y.one("#subPanel").on("click", function (e) {
        e.preventDefault();
        var instance = new subPanel(panelConfig);
    });
});