JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<script src="http://www.zurb.com/javascripts/plugins/jquery.reveal.js"></script>
<a href="#" data-requesttype="support" class="support-link">Support</a>
<a href="#" data-requesttype="feedback" class="support-link">Feedback</a>

<div id="myModal" class="reveal-modal medium">
    
    
    <ul id="support-dialog">
        
        <li data-requesttype="support">
            <img src="/images/icon-support-32.png" />
            <h1>Support: <span>Need help?</span></h1>
            <p>Have a question or find a bug? We're here for you.</p>
            <form>
                <fieldset>
                    <label for="support-email">Email:</label>
                    <input id="support-email" type="email" required />
                    <p class="form-help">This is the email you have registered with [Service Name].</p>
                </fieldset>
                <fieldset>
                    <label for="support-comments">Let us know how we can help you:</label>
                    <textarea id="support-comments" rows="4" cols="20" placeholder="Describe your issue here..." required></textarea>
                </fieldset>
                <fieldset class="form-actions">
                    <input type="submit" value="Submit" />
                    <a href="#">Cancel</a>
                </fieldset>
            </form>
        </li>
        
        <li data-requesttype="feedback">
            <img src="/images/icon-feedback-32.png" />
            <h1>Feedback: <span>Have a suggestion?</span></h1>
            <p>We value any feedback and suggestions you may have for us.</p>
            <form>
                <fieldset>
                    <label for="feedback-comments">Share your thoughts:</label>
                    <textarea id="feedback-comments" rows="4" cols="20" placeholder="Tell us what you think here..."></textarea>
                </fieldset>
                <fieldset>
                    <label>How likely are you to recommend [Service Name]?</label>
              ...

CSS

body {
    margin: 50px;    
}

#support-dialog > li {
    background: #f7f7f7;
    cursor: pointer;
    padding: 20px;
    
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#support-dialog img {
    float: left;
    margin: 5px 20px 0 0;
    height: 32px;
    width: 32px;
}

#support-dialog h1 {
    color: #96c54a;
    font-size: 22px;
    font-weight: bold;
}

#support-dialog > .transparent {
    opacity: .5;
    filter: alpha(opacity=50);
    
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

#support-dialog > li:last-child {
    margin-top: 10px;
}

#support-dialog > li:hover {
    background: #eee;
}

#support-dialog > .transparent:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

#support-dialog > li:active {
    background-color: #eaeaea;
    
    -moz-box-shadow: inset 0 0 5px #ccc;
    -webkit-box-shadow: inset 0 0 5px #ccc;
    box-shadow: inset 0 0 5px #ccc;
}

#support-dialog > .toggled {
    background-color: #eee;
    cursor: default;
}

#support-dialog > .toggled:active {
    background-color: #eee;
    
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#support-dialog h1 span {
    color: #444;
}

#support-dialog h1 + p,
#support-dialog label {
    color: #888;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}

#support-dialog form {
    display: none;
}

#support-dialog fieldset {
    margin-top: 20px;
}

#support-dialog fieldset label {
    color: #444;
    display: block;
    margin-bottom: 5px;
}

form fieldset p.form-help {
    color: #999;
    font-size: 11px;
    margin: 5px 0 0 0;
}

#support-dialog input[type="email"],
#support-dialog textarea {
    border: solid 1px #AAAAAA;
    font-size: 13px;
    padding: 5px;
    outline: none;
    width: 98%;
    
    -moz-box-shadow: inset 0 1px 1px...

JavaScript

$(document).ready(function() {
    var $choices = $('#support-dialog').children('li');

    $choices.click(function(event) {
        if (!$(event.target).is('textarea, label, input, .toggled')) {
            var $this = $(this).toggleClass('toggled').removeClass('transparent'),
                $form = $this.find('form');

            $choices.not($this).toggleClass('transparent').filter('.toggled').removeClass('toggled').find('form').slideFadeToggle();
            $form.slideFadeToggle();
        }
    });

    $('.support-link').click(function(e) {
        e.preventDefault();
        $('#myModal').reveal({
            animation: 'fade',
            animationspeed: 75,
            dismissmodalclass: 'close-reveal-modal'
        });
        $choices.filter('[data-requesttype=' + $(this).data('requesttype') + ']').trigger('click');
    });

    //$('#support-dialog').find('textarea').autoGrow();
});


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

$.fn.autoGrow = function() {
    this.filter('textarea').each(function() {
        var $this = $(this),
            minHeight = $this.height(),

            shadow = $('<div></div>').css({
                position: 'absolute',
                top: -10000,
                left: -10000,
                width: $(this).width(),
                fontSize: $this.css('fontSize'),
                fontFamily: $this.css('fontFamily'),
                lineHeight: $this.css('lineHeight'),
                resize: 'none'
            }).addClass('shadow').appendTo(document.body),

            update = function() {
                var t = this;
                setTimeout(function() {
                    var val = t.value.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, '&amp;').replace(/\n/g, '<br/>&nbsp;');

                    if ($.trim(val) === '') {
                        val = 'a';
        ...