JSFiddle - React, Tailwind, and code Playground

by Lien Z

HTML

<article>
    <h1>My Awesome Post</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</article>
<div id="contact">
    <h2>Contact Me</h2>
    <form action="#">
        <ul>
            <li>
                <label for="name">Name: </label>
                <input name="name" id="name">
            </li>
            <li>
                <label for="email">Email Address: </label>
                <input name="email" id="email">
            </li>
            <li>
                <label for="comments">What's Up?</label>
                <textarea name="comments" id="comments" cols="30" rows="10"></textarea>
            </li>
            <li>
                <input type="submit" value="Submit">
            </li>
        </ul>
    </form>
</div>

CSS

body {
    width: 600px;
    margin: auto;
    font-family: sans-serif;
}
#contact {
    background: #e3e3e3;
    padding: 1em 2em;
    position: relative;
}
.js #contact {
    position: absolute;
    top: 0;
    width: inherit;
    display: none;
}
#contact h2 {
    margin-top: 0;
}
#contact ul {
    padding: 0;
}
#contact li {
    list-style: none;
    margin-bottom: 1em;
}
/* Close button on form */
.close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
}
/* Form inputs */
input, textarea {
    width: 100%;
    line-height: 2em;
}
input[type=submit] {
    width: auto;
}
label {
    display: block;
    text-align: left;
}

JavaScript

(function(){
    $("html").addClass("js");

    var contactForm = {
        container: $("#contact"),
        config: {
            effect:"slideToggle",
            speed:500
        },
        init:function(config){
            $.extend(this.config,config);
            $("<button></button>",{
                text: "Contact Me"
            })
            .insertAfter("article:first")
            .on("click",this.show);
        },
        show:function(){
            var cf = contactForm,
                container = cf.container,
                config = cf.config;
            if(container.is(":hidden")){
                contactForm.close.call(container);
                container[config.effect](config.speed);
            }
            
        },
        close:function(){
            
            // this = #contact
            var $this = $(this);
            
            if($this.find("span.close").length) return;
            
            $("<span class='close'>X</span>")
            .prependTo(this)
            .on("click",function(){
                // this = span 
                $this[contactForm.config.effect](contactForm.config.speed);
            })
        }
    }
    
    contactForm.init({
        effect:"fadeToggle",
        speed: 2000
    });
})();