JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<script src="http://www.virtualpetstore.com/js/jquery.simplemodal.js"></script>
<script src="http://www.virtualpetstore.com/js/jquery.actual.js"></script>
<html>
    <head></head>
    <body>
    <form>
    <div id="Soluciones_derecho2">
        <div class="contactanos">
            <div id="contact-button">
                <div id='contact-form'>
                    <a class="consultcontacto" href="#"></a>
                    <a class="suportecontacto" href="#"></a>
                </div>
            </div>
        </div>
    </div>
    </form>

<div id='modal-contact-form' style='display: none'>
    <div class='contact-top'>
    </div>
    <div class='contact-content'>
        <h1 class='contact-title'>Crea Su Nuevo Ticket:</h1>
        <div class='contact-loading' style='display: none'>
        </div>
        <div class='contact-message' style='display: none'>
        </div>
        <form action='ModalContact1.aspx' style='display: none'>
            <label for='contact-name'>
                *Name:</label>
            <input type='text' id='contact-name' class='contact-input' name='name' tabindex='1001' />
            <label for='contact-email'>
                *Email:</label>
            <input type='text' id='contact-email' class='contact-input' name='email' tabindex='1002' />
            <label for='contact-subject'>
                Subject:</label>
            <input type='text' id='contact-subject' class='contact-input' name='subject' value='' tabindex='1003' />

            <label for='web-url'>
                Website:</label>
            <input type='text' id='web-url' class='contact-input' name='weburl' value='' tabindex='1004' />

            <label for='priority-type'>
                Priority:</label>
            <select id='priority-type' name='priorities' tabindex='1005'>
                <option value="generalsupport" selected='selected'>General Support</option>
                <option value="techissue">Technical Issue</option>
               ...

CSS

#Soluciones_derecho2 {
    float: left;
    position: relative;
    /*background-color: Purple;*/
    width: 230px;
    /*height: 536px;*/
}
#Soluciones_derecho2 .contactanos {
    width: 230px;
    height: 219px;
    background-color: olive;
}

#contact-button {
    height: 40px;
    width: 220px;
    float: left;
    position:relative;
    margin: 7px 0 0 5px;
}
a.consultcontacto { 
    height: 40px; 
    width: 220px;
    background-image: url("http://www.virtualpetstore.com/Images/Home/consultbuton3.png"); 
    background-position:left bottom; /* 0px -27px; */ 
    display: block;
    font-size: 11px;
    text-align: center;
}

a.consultcontacto:hover { 
    /*background-position:left top; /*0px 0px;*/
}

a.suportecontacto {
    height: 40px; 
    width: 220px;
    margin: 6px 0 0 0;
    background-image: url("http://www.virtualpetstore.com/images/Home/soportebuton2.png"); 
    background-position:left bottom; /* 0px -27px; */ 
    display: block;
    font-size: 11px;
    text-align: center;    
}
a.suportecontacto:hover {
}

/* contact.css */
/*
 * SimpleModal Contact Form
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: contact.css 254 2010-07-23 05:14:44Z emartin24 $
 */

#contact-overlay {                          /* Overlay */
    background-color:#000;
    /*background-color: Green;*/
    cursor:wait;
}

#contact-container {                        /* contact-container is the containerId defined in contact.js */
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;                      /* Height of space above and below all Text ie Labels */
    text-align:left; 
    /*width:425px;*/                        /* Modal Width */ /* Modal Height within contact.js */
    width: 350px;
}
#contact-container .contact-content {      ...

JavaScript

/*
* SimpleModal Contact Form
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
*   http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: contact.js 254 2010-07-23 05:14:44Z emartin24 $
*/

jQuery(function ($) {
    var contact = {
        message: null,
        init: function () {
            $('#contact-form input.consultcontacto, a.consultcontacto').click(function (e) {
                e.preventDefault();

                // Create the 1stModal dialog with the data

                $('#modal-contact-form').modal({
                    closeHTML: "<a href='#' title='Close' class='modal-close'>Cierra Ticket Modal</a>",
                    //maxHeight: 62,
                    //maxWidth: 62,
                    //minHeight: 62,
                    //minWidth: 62,
                    position: [50, 50],
                    //autoPosition: false,
                    autoResize: true,
                    //overlayId: 'contact-overlay',
                    containerId: 'contact-container',
                    containerCss: { 'width': '380px' },
                    onOpen: contact.open,
                    onShow: contact.show,
                    onClose: contact.close
                });
            });

            $('#contact-form input.suportecontacto, a.suportecontacto').click(function (e) {
                e.preventDefault();

                // Create the 2nd Modal dialog with the data

                $('#modal-soporte-form').modal({
                    closeHTML: "<a href='#' title='Close' class='modal-close'>Cierra Ticket Modal</a>",
                    //maxHeight: 62,
                    //maxWidth: 62,
                    //minHeight: 62,
                    //minWidth: 62,
                    position: [50, 50],
                    //autoPosition: false,
                    autoResize: true,
            ...