JSFiddle - React, Tailwind, and code Playground

HTML

<div id="feedback"><form name="feedbackform" id="feedbackform" action="feedback-accept.php" onSubmit="javascript: validate(); return false;" method="post">
    <div id="feedback-top">
        <div id="feedback-header">Send Us Your Feedback</div>
        <div id="feeback-top-subrow"><div id="feedback-customer-service">Need Help? Contact <a href="#">Customer Service</a>.</div><div id="feedback-header-sub">We'd love to hear your thoughts.</div></div>
    </div>
    <div id="feedback-divider"></div>
    <div id="feedback-bottom">
        <div class="feedback-subtitle">How do you feel about this site? <span class="feedback-sub">(optional)</span></div>
            <div id="feeback-satisfied-bar">
                <div id="feeback-satisfied-bar-inner">
                    <div class="feeback-satisfied-bar-odd">1<br /><input type="radio" name="satisfaction" id="satisfaction" value="1" /></div>
                    <div class="feeback-satisfied-bar-even">2<br />    <input type="radio" name="satisfaction" id="satisfaction" value="2" /></div>
<div class="feeback-satisfied-bar-odd">3<br />
  <input type="radio" name="satisfaction" id="satisfaction" value="3" /></div>
                    <div class="feeback-satisfied-bar-even">4<br />    <input type="radio" name="satisfaction" id="4" value="satisfaction" /></div>
                    <div class="feeback-satisfied-bar-odd">5<br />
                      <input type="radio" name="satisfaction" id="satisfaction" value="5" /></div>
                    <div class="feeback-satisfied-bar-even">6<br />    <input type="radio" name="satisfaction" id="satisfaction" value="6" /></div>
                    <div class="feeback-satisfied-bar-odd">7<br />
                      <input type="radio" name="satisfaction" id="satisfaction" value="7" /></div>
                    <div class="feeback-satisfied-bar-even">8<br />    <input type="radio" name="satisfaction" id="satisfaction" value="8" /></div>
                    <div...

CSS

#feedback{
    width: 664px;
    border-top: solid 20px #cccccc;
    font-family: Helvetica, Arial, sans-serif;
}
#feedback-top{
    padding: 16px 31px 14px 25px;
}
#feedback-header{
    color: #666666;
    font-size: 21px;
    padding-bottom: 20px;
    letter-spacing: -1px;
}
#feeback-top-subrow{
    position: relative;
}
#feedback-header-sub{
    color: #3e3e3e;
    font-weight: bold;
    font-size: 15px;
    position: absolute;
    left: 0;
    bottom: 0;
}
#feedback-customer-service{
    font-size: 12px;
    position: absolute;
    right: 0;
    bottom: 0; 
}
#feedback-customer-service a, #feedback-submit a{
    color: #063462;
    text-decoration: none;
    font-weight: bold;
}
#feedback-customer-service a:hover, #feedback-submit a:hover{
    text-decoration: underline;
}
#feedback-divider{
    background-image: url(feedback-divider.jpg);
    background-repeat: repeat-x;
    height: 8px;
}
#feedback-bottom{
    padding: 9px 20px 8px 20px;
}
.feedback-subtitle{
    padding-left: 7px;
    padding-bottom: 8px;
    font-weight: bold;
    font-size: 12px;
}
.feedback-subtitle .feedback-sub{
    font-weight: normal;    
}
form{
    margin: 0;
    padding: 0;
}
#feeback-satisfied-bar{
    background-image: url(very-dissatisfied.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    padding-left: 75px;
    height: 40px;
    font-size: 12px;
    padding-bottom: 13px;
}
#feeback-satisfied-bar-inner{
    background-image: url(very-satisfied.jpg);
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 74px;
    height: 40px;
}
.feeback-satisfied-bar-odd{
    padding-top: 2px;
    width: 46px;
    height: 38px;
    background-image: url(feedback-odd.jpg);    
    background-repeat: repeat-x;
/*    border-left: 1px #CCD1D7 solid;
    border-right: 1px #CCD1D7 solid; */
    text-align: center;
    float: left;
}
.feeback-satisfied-bar-even{
    padding-top: 2px;
    width: 48px;
    border-left: 1px solid #cfcfcf;
   ...

JavaScript

// Allows for only one feedback topic to be selected
$(function(){
    $(".img-swap").live('click', function() {
        this.src = this.src.replace('_off', '_on');
        $('.img-swap').not(this).attr('src', function(index, attr) {
            return attr.replace('_on', '_off');
        });
    });
});

// Empties email input field onFocus
function clickclear(thisfield, defaulttext) {
    if (thisfield.value == defaulttext) {
        thisfield.value = "";
    }
}

// Refill email input field onBlur
function clickrecall(thisfield, defaulttext) {
    if (thisfield.value == "") {
        thisfield.value = defaulttext;
    }
}

// Submit form to next page
function submitForm() {
 //   document.forms["feedbackform"].submit();
     document.feedbackform.submit();
}

// Submit form and validate email using RFC 2822 standard
function validateEmail(email) { 
    // Modified version original from: http://stackoverflow.com/a/46181/11236
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

// Return true if email field is left unchanged
function originalText(email){
    var defaultMsg;
    defaultMsg = "Enter your email address (optional)";
    if(defaultMsg == email){
        return true;    
    }
    return false;
}

// Verify or decline with error message
function validate(){
    $("#result").text("");
    var email = $("#email").val();
    if ((validateEmail(email)) || originalText(email)) {
        submitForm();
    } else {
        $("#result").text(email + " is not a valid email.");
        $("#result").css("color", "red");
      }
      return false;
}
$("form").bind("submit", validate);