JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      
      
      <title>JQuery Calculate</title>
</head>

<body>

<div id="wrapper">

      <h1>JQuery Calculate</h1>
      
      <h2 id="total">Your Total is: &euro;<span></span> </h2>
      
      <form action="" method="">
            <fieldset>
                  <legend>What package would you like?</legend>
                  <div class="clearfix alter">
                        <input id="bronze" name="package" type="radio" value="bronze" />
                        <label for="bronze">&euro;50 - Bronze Package</label>
                  </div>
                  <div class="clearfix alter">
                        <input id="silver" name="package" type="radio" value="silver" />
                        <label for="silver">&euro;100 - Silver Package</label>
                  </div>
                  <div class="clearfix alter">
                        <input id="gold" name="package" type="radio" value="gold" />
                        <label for="gold"> &euro;200 - Gold Package</label>
                  </div>
            </fieldset>
            
            <fieldset>
                  <legend>Would you like premium support?</legend>
                  <div class="clearfix alter">
                        <input id="email_support" name="support" type="radio" value="email_support" />
                        <label for="email_support">&euro;20 - Email Support</label>
                  </div>
                  <div class="clearfix alter">
                        <input  id="email_telephone_support" name="support" type="radio" value="email_telephone_support" />
                        <label for="email_telephone_support">&euro;50 - Email &amp; Telephone Support</label>
                  </div>
                  <div...

CSS

/* --------------- ( Reset ) --------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}




/* --------------- ( Clearfix ) --------------------------------------------- */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */




/* --------------- ( General ) --------------------------------------------- */
body {
    font: 11px Verdana, Arial, Helvetica, sans-serif;
    color: #333;
    padding: 20px 0px;
}
#wrapper {
    margin: 0 auto;
    width: 500px;
    position: relative;
}
h1 { margin-bottom: 25px; font: 22px Arial, Helvetica, sans-serif; }
h2 { 
      margin-bottom: 25px; 
      font: 17px Arial, Helvetica, sans-serif; 
      border: 1px solid #ccc;
      padding: 10px;
}
a { color: #0000FF; }
div { margin-bottom: 12px; line-height: 17px; }




/* --------------- ( Calculate )...

JavaScript

$(document).ready(function()
            {
                  $('form div:nth-child(5)').hide();
                
                  // Packages
                  var bronze = 50;
                  var silver = 100;
                  var gold = 200;
                  var package_total = 0;
                  
                  // Support Options
                  var email_support = 20;
                  var email_telephone_support = 50;
                  var email_telephone_im_support = 80;
                  var no_support = 0;
                  var support_total = 0;
                  
                  var total = support_total + package_total;
                  $('#total span').append(total);
                  
                  $('input:not(:submit)').click(function()
                  {
                        // Define getValue
                        var getValue = $(this).attr('id'); // bronze etc
                        
                        if(getValue == 'bronze' || getValue == 'silver' || getValue == 'gold')
                        {
                              // Convert to a number
                              getValue = eval(getValue);
                              
                              package_total = getValue;
                        
                              $('#total span').empty().append(package_total + support_total);
                        }
                        else if(getValue == 'email_support' || getValue == 'email_telephone_support' || getValue == 'email_telephone_im_support' || getValue == 'no_support')
                        {
                              $('form div:nth-child(5)').show();
                              
                              // Convert to a number
                              getValue = eval(getValue);
                              
                              support_total = getValue;
                        
                              $('#total...