JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Design4 Mailchimp form</title>
 
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
 
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
 
 
    <div id="mc_embed_signup">
        <form action="https://facebook.us14.list-manage.com/subscribe/post?u=db40c343b16b0af0b777d7db4&id=2631affdd7" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" data-drupal-form-fields="mce-EMAIL,mc-embedded-subscribe">
            <div id="mc_embed_signup_scroll">
                <label for="mce-EMAIL">Stay Up To Date:</label>
                <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your Email Address" required="">
                <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                <div style="position: absolute; left: -5000px;">
                    <input type="text" name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="">
                </div>
                <button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">Submit <i class="fa fa-envelope"></i></button>
                <div class="info"></div>
            </div>
        </form>
    </div>
 
    <!--End mc_embed_signup-->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="jquery.ajaxchimp.js"></script>
    <script>
    $(document).ready(function() {
        $('#mc_embed_signup').find('form').ajaxChimp();
    });
    </script>

CSS

* {
    margin: 0;
    padding: 0;
}
#mc_embed_signup, #mc_embed_signup * {
    box-sizing: border-box;
}
#mc_embed_signup {
    width: 100%;
    background-color: #cecece;
    text-align: center;
    padding: 1.85em 0.5em;
    margin: 0 auto;
    font-size: 20px;
    display: block;
    /*background: url('../bg.png');*/
}
#mc_embed_signup label, #mc_embed_signup #mce-EMAIL, #mc_embed_signup button {
    border: none;
    display: inline;
    padding: 0 0.5em;
    vertical-align: middle;
    font-size: 1em;
    width: 100%;
    margin: 0;
    min-height: 2em;
    font-family:'lato';
    font-weight:normal;
}
#mc_embed_signup label {
    display: block;
    text-transform: uppercase;
    color: white;
    font-family: 'lato';
    font-size: 0.9em;
    letter-spacing: 2px;
}
#mc_embed_signup #mce-EMAIL, #mc_embed_signup button, #mc_embed_signup .info {
    font-family: "lato";
}
#mc_embed_signup #mce-EMAIL {
    width: 60%;
    width: calc(90% - 7em);
}
#mc_embed_signup input:focus {
    outline: 1px solid rgba(0, 0, 0, 0.2);
}
#mc_embed_signup button {
    border: none;
    font-weight:normal;
    color: #ffffff;
    text-transform: uppercase;
    background: #d53c3b;
    width: 39%;
    width: 7em;
    margin-left: -5px;
    cursor: pointer;
    letter-spacing: 2px;
}
#mc_embed_signup button:hover {
    background: #a0cf63;
}
 
@media only screen and (min-width: 600px) {
    #mc_embed_signup label, #mc_embed_signup #mce-EMAIL, #mc_embed_signup button {
        min-height: 2.2em;
    }
    #mc_embed_signup {
        padding: 1.85em 2em;
    }
}
@media only screen and (min-width: 800px) {
    #mc_embed_signup label {
        display: inline;
        /*width: 30%;*/
         
        width: 10em;
    }
    #mc_embed_signup #mce-EMAIL {
        width: 13em;
    }
    #mc_embed_signup button {
        font-size: 1.1em;
        width: 8.8em;
        font-weight: 400;
        margin-left: 0.1em;
    }
}
@media only screen and (min-width: 1026px) {
    #mc_embed_signup...

JavaScript

(function ($) {
    'use strict';
 
    $.ajaxChimp = {
        responses: {
            'We have sent you a confirmation email'                                             : 0,
            'Please enter a valid email'                                                        : 1,
            'An email address must contain a single @'                                          : 2,
            'The domain portion of the email address is invalid (the portion after the @: )'    : 3,
            'The username portion of the email address is invalid (the portion before the @: )' : 4,
            'This email address looks fake or invalid. Please enter a real email address'       : 5
        },
        translations: {
            'en': null
        },
        init: function (selector, options) {
            $(selector).ajaxChimp(options);
        }
    };
 
    $.fn.ajaxChimp = function (options) {
        $(this).each(function(i, elem) {
            var form = $(elem);
            var email = form.find('input[type=email]');
            var label = form.find('.info');
 
            var settings = $.extend({
                'url': form.attr('action'),
                'language': 'en'
            }, options);
 
            var url = settings.url.replace('/post?', '/post-json?').concat('&c=?');
 
            form.attr('novalidate', 'true');
            email.attr('name', 'EMAIL');
 
            form.submit(function () {
                var msg;
                function successCallback(resp) {
                    if (resp.result === 'success') {
                        msg = 'We have sent you a confirmation email';
                        label.removeClass('error').addClass('valid');
                        email.removeClass('error').addClass('valid');
                    } else {
                        email.removeClass('valid').addClass('error');
                        label.removeClass('valid').addClass('error');
                        var index =...