JSFiddle - React, Tailwind, and code Playground

by lakshmipathi

HTML

<a href="/contact" id="contact">Contact Us</a>

CSS

a.selected {
    background-color:#1F75CC;
    color:white;
    z-index:100;
}
.messagepop {
    background-color:#FFFFFF;
    border:1px solid #999999;
    cursor:default;
    display:none;
    margin-top: 15px;
    position:absolute;
    text-align:left;
    width:394px;
    z-index:50;
    padding: 25px 25px 20px;
}
label {
    display: block;
    margin-bottom: 3px;
    padding-left: 15px;
    text-indent: -15px;
}
.messagepop p, .messagepop.div {
    border-bottom: 1px solid #EFEFEF;
    margin: 8px 0;
    padding-bottom: 8px;
}

JavaScript

$(function () {
        $("#contact").live('click', function (event) {
            $(this).addClass("selected").parent().append('<div class="messagepop pop"><form method="post" id="new_message" action="/messages"><p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p><p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p><p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p></form></div>');
            $(".pop").slideFadeToggle()
            $("#email").focus();
            return false;
        });

        $(".close").live('click', function () {
            $(".pop").slideFadeToggle();
            $("#contact").removeClass("selected");
            return false;
        });
    });

    $.fn.slideFadeToggle = function (easing, callback) {
        return this.animate({
            opacity: 'toggle',
            height: 'toggle'
        }, "fast", easing, callback);
    };