JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://stage.nhm.org/site/sites/all/themes/zen_nhm_theme/js/jquery-1.3.2.min.js"></script>
<script src="http://stage.nhm.org/site/sites/all/themes/zen_nhm_theme/js/forms.min.js"></script>
<div class="bl_center bl_schoolvisit">
     <h2>Mobile Outreach Registration</h2>

    <p>The stipulations of our grant limit the schools that we may serve. Please fill out the forms to assist us in scheduling a visit to your school.</p>
    <div class="blClear"></div>
    <div class="bl_block">
        <div class="bl_block2">
            <form id="form-outreach-registration" name="form-outreach-registration" method="post" action="">
                <!-- - - step 1 - -->
                <div id="step-1" style="display:none" class="step">
                    <div id="all_fields">
                        <div id="outreach-choice">
                            <div style="margin-top: 0px;">&nbsp;</div>
                            <div id="outreach_selection">
                                <p>Please choose which mobile you are interested in: &nbsp;
                                    <select name="select_outreach_choice" id="select_outreach_choice">
                                        <option value="">
                                            < select>
                                        </option>
                                        <option value="Earthmobile">Earthmobile</option>
                                        <option value="Skymobile">Skymobile</option>
                                        <option value="Seamobile">Seamobile</option>
                                    </select>
                                </p>
                            </div>
                        </div>
                        <div id="outreach-questions" style="display: none;">
                            <div style="margin-top: 0px;">&nbsp;</div>
                            <div id="question-1">
                                <p>Are you a school within LAUSD?
 ...

CSS

/* $Id: print.css,v 1.1.2.1 2009/02/13 06:40:02 johnalbin Exp $ */

/* underline all links */
  a:link, a:visited
  {
    text-decoration: underline !important;
  }

  /* Don't underline header */
  #site-name a:link,
  #site-name a:visited
  {
    text-decoration: none !important;
  }

/* CSS2 selector to add visible href after links */
  #content a:link:after,
  #content a:visited:after
  {
    content: " (" attr(href) ") ";
    font-size: 0.8em;
    font-weight: normal;
  }

/* Un-float the content */
  #content,
  #content-inner
  {
    float: none;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

/* Turn off any background colors or images */
  body,
  #page, #page-inner,
  #main, #main-inner,
  #content, #content-inner
  {
    color: #000;
    background-color: transparent !important;
    background-image: none !important;
  }

/* Hide sidebars and nav elements */
  #skip-to-nav, #navbar, #sidebar-left, #sidebar-right, #footer,
  .breadcrumb, div.tabs, .links, .taxonomy,
  .book-navigation, .forum-topic-navigation, .pager, .feed-icons
  {
    visibility: hidden;
    display: none;
  }

  /* NHM specific - M. Picco (10/23/2009) */
  
  /* Un-float the content */
  #blContent, #bl_content_box, .bl_article
  {
    float: none;
    width: auto;
    margin: 0 5%!important;
    padding: 0 !important;
    clear: both;
  }


  
  #funky_tabs, #workspace_link, .bl_left_column, .bl_right_column
  {
    visibility: hidden;
    display: none;
  }
  

/* Otherwise, Firefox clips the content after the first page. */
  #page
  {
    overflow-y: visible;
  }
.bl_center { width: 467px; float: left; }
.bl_center  h2 { /* margin-bottom: 20px; */ }
.bl_center .bl_color3  { color: #AF1F2D; margin: 0 0 7px 0; font-size: 15px; }
.bl_center .bl_image { float:left; width: 72px; margin-right: 0px; }
.bl_center .bl_image img { border: 0px solid #636363; padding-bottom: 0px!important; }
.bl_center .bl_text { float:right; width: 379px; }
.bl_center .bl_text a...

JavaScript

/*
 * NHM 'Outreach Registration' Javascript library
 * Michael Picco, Jan/2010
 */

_err = "";
_posted = false;
var _err_msg = "";
var _zip_found = false;
var _list_1 = 'http://stage.nhm.org/site/sites/default/files/for_teachers/elementary_list.xml';
var _list_2 = 'http://stage.nhm.org/site/sites/default/files/for_teachers/middle_list.xml';
var _active_list, _mobile_type, _school_name, _school_zip = "";

/*
 * init method
 */
window.onload = function () {

    $(function () {
        $("#error-dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            position: top,
            closeOnEscape: true,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });
    });

    $(function () {
        $("#processing-dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            position: top,
            closeOnEscape: true,
            draggable: false,
            width: 324
        });
    });

    $("#select_outreach_choice").change(

    function () {
        val = $("#select_outreach_choice").val();
        if (val.length != "") {
            confirm_msg = 'You have selected the \'' + val + '\' \n\nIs this correct?';
            var answer = confirm(confirm_msg);
            //alert(answer);
            if (answer == true) {
                _mobile_type = val;
                if (_mobile_type == "Seamobile") {
                    _active_list = _list_2;
                } else {
                    _active_list = _list_1;
                }
                $("#outreach-choice").hide();
                $("#outreach-questions").slideDown('normal');
            } else {
                $("#select_outreach_choice").val('');
            }
        }
    });

    $("input[name='radio_is_lausd']").click(

    function () {
        val = $("input[name='radio_is_lausd']:checked").val();
  ...