JSFiddle - React, Tailwind, and code Playground

by cancerbero_sgx

HTML

<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
<div class="yui3-skin-sam">
<div id="panelContent" class="yui3-skin-sam">
    <div class="yui3-widget-bd">
        <form>
            <fieldset>
                <p>
                    <label for="id">ID</label><br/>
                    <input type="text" name="id" id="productId" placeholder="">
                </p>
                <p>
                    <label for="name">Name</label><br/>
                    <input type="text" name="name" id="name" value="" placeholder="">
                </p>
                <p>
                    <label for="password">Price</label><br/>
                    <input type="text" name="price" id="price" value="" placeholder="$">
                </p>
            </fieldset>
        </form>
    </div>
</div>
</div>

JavaScript

/*my problem with tabview is that if it contains widgets I always must render the tab view AFTER all the other widgets. This is not alwais desired....*/

YUI().use("panel", function(Y){
    
var panel = new Y.Panel({
    srcNode      : '#panelContent',
    headerContent: 'Add A New Product',
    width        : 250,
    zIndex       : 5,
    centered     : true,
    modal        : true,
    visible      : false,
    render       : true
});
panel.show(); 
    
});