JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />
        <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container-min.js"></script>

<div id="container">
    <div>
        <button id="show1">Show panel1</button> 
        <button id="hide1">Hide panel1</button>
    </div>
    
    <div id="panel1">
        <div class="hd">Panel #1 from Markup &mdash; This Panel is Draggable</div>
        <div class="bd">This is a Panel that was marked up in the document.</div>
        <div class="ft">End of Panel #1</div>
    </div>
    
    <div>
        <button id="show2">Show panel2</button> 
        <button id="hide2">Hide panel2</button>
    </div>
</div>

JavaScript

var panel;

    // Instantiate a Panel from markup
    panel = new YAHOO.widget.Panel("panel1", { width:"320px", visible:false, constraintoviewport:true } );
    panel.render();

    YAHOO.util.Event.addListener("show1", "click", panel.show, panel, true);
    YAHOO.util.Event.addListener("hide1", "click", panel.hide, panel, true);

    panel.subscribe("beforeShow", function(){
        console.log("antes de renderizar panel calendario");                
    });