JSFiddle - React, Tailwind, and code Playground

by gdanko

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Dialog Test</title>
</head>
<body class="yui3-skin-sam  yui-skin-sam">
    <h2>Dialog Test</h2>
    <div id="add-edit-dialog" class="yui-pe-content">
        <div class="bd">
            <form id="add-edit-form">
                <table border = "0">
                    <tr><td class="dialog-title">Title:</td><td><input type="textbox" class="dialog-input" id="add-edit-title" size="40" maxlength="50"/></td></tr>
                    <tr><td class="dialog-title">Description:</td><td><input type="textbox" class="dialog-input" id="add-edit-desc" size="40" maxlength="250"/></td></tr>
                    <tr><td class="dialog-title">Children:</td><td><input type="textbox" class="dialog-input" id="add-edit-children" size="40"maxlength="250"/></td></tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

CSS

.yui-pe-content {
    display: none;
}

.yui3-panel {
    outline: none;
    font-family: arial;
    font-size: 13px;
}
.yui3-panel-content .yui3-widget-hd {
    font-weight: bold;
}
.yui3-panel-content .yui3-widget-bd {
    padding: 15px;
}
.yui3-panel-content label {
    margin-right: 30px;
}
.yui3-panel-content fieldset {
    border: none;
    padding: 0;
}
.yui3-panel-content input[type="text"] {
    border: none;
    border: 1px solid #ccc;
    padding: 30px 7px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 100%;
    width: 200px;
}

.dialog-title {
    margin: 3px 25px 0px 25px;
    padding-left: 12px;
}

.dialog-input {
    margin: 3px 25px 0px 25px;
}

.yui3-widget-hd {
    margin-bottom: 15px;
}

.yui3-widget-ft {
   margin-top: 15px;
}

JavaScript

YUI().use('node', 'panel', function(Y) {

var add_editOK = function() {
    add_edit.hide();
};

var add_editCancel = function() {
    add_edit.hide();
};

var add_edit = new Y.Panel( {
    headerContent : 'Test Dialog',
    srcNode : '#add-edit-dialog',
    fixedcenter: true,
    visible: true,
    close: false,
    draggable: true,
    constraintoviewport: true,
    buttons: [
        { value: "OK", action: add_editOK,section: Y.WidgetStdMod.FOOTER },
        { value: "Cancel", action: add_editCancel,section: Y.WidgetStdMod.FOOTER },
    ]
});

Y.one('#add-edit-dialog').removeClass('yui-pe-content');
add_edit.render(document.body);
});