JSFiddle - React, Tailwind, and code Playground

by TeslaNick

HTML

<div class="top-bar">

    <div class="add-customer">
        
    </div>
</div>

<script id="create-customer-tmpl" type="text/x-handlebars-template">
    <form>
        <label>
            <span>First Name</span>
            <input placeholder="First Name" />
        </label>
        
        <label>
            <span>Last Name</span>
            <input placeholder="Last Name" />
        </label>

        <label>
            <span>Means to Contact</span>
            <input placeholder="Means to Contact" />
        </label>
        
        <div class="matches">
        </div>

        <div class="controls">
            <input type="submit" value="Save Contact" />
        </div>
    </form>
    
</script>

<script id="match-tmpl" type="text/x-handlebars-template">
    <div class="match">
        <div>{{name}}</div>
        <div>{{meansToContact}}</div>
    </div>
</script>

CSS

html {
    font-family: helvetica;        
}

.yui3-overlay-content:after, .yui3-overlay-content:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.yui3-overlay-content:after {
    border-bottom-color: #ffffff;
    border-width: 8px;
    left: 50%;
    margin-left: -8px;
}
.yui3-overlay-content:before {
    border-bottom-color: #cccccc;
    border-width: 9px;
    left: 50%;
    margin-left: -9px;
}

.yui3-overlay {
    padding: 4px;
    z-index: 2;
}

.yui3-overlay-content {
    position: relative;
    
    width: 200px;
    padding: 8px;
    
    font-size: 18px;
    
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1), 0 1px 5px rgba(0,0,0,0.1);
}

label {
    display: block;
    padding: 4px 0;
}

label span {
    display: none;
}

label input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    font-size: 16px;
    padding: 4px;
}

.top-bar {
    position: relative;
    height: 45px;

    background: -webkit-linear-gradient(top, #697b92 0%,#3e4144 100%);
}

.top-bar .add-customer {
    margin: 0 auto;
    padding: 0;
    
    height: 45px;
    width: 45px;
    

    background: transparent...

JavaScript

YUI().use('overlay', 'view', 'handlebars', function(Y) {

    var matches = [
        {
            name: "Joy Chandler",
            meansToContact: "802.222.1234"           
        },
        {
            name: "Jeff Goldblum",
            meansToContact: "[email protected]"           
        }        
    ];
    
    Y.one('body').addClass('yui3-skin-sam');

    var createoverlay = new Y.Overlay({
        visible: false,
        zIndex: 1
    });

    createoverlay.render();

    var createview = new Y.View({
        container: createoverlay.getStdModNode(Y.WidgetStdMod.BODY, true)
    });
    
    createview.template = Y.Handlebars.compile(Y.one('#create-customer-tmpl').getHTML());


    createview.render = function() {
        console.log(this.get('container'));
        this.get('container').setHTML(this.template());

        return this;
    };
    


    createoverlay.on('visibleChange', function() {
        Y.log(createview);
        createview.render();
    });



    Y.one('.top-bar').delegate('click', function(evt) {
        Y.log("Showing add customer dialog.");

        createoverlay.set('align', {
            node: evt.target,
            points: [Y.WidgetPositionAlign.TC, Y.WidgetPositionAlign.BC]
        });

        createoverlay.set('visible', !createoverlay.get('visible'));
    }, '.add-customer');

});