JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<form id="calculator" name="calculator">
    <div class="radlabel"><span id="stampBlue"><strong>Step 1. Select Property Location</strong> &gt;&gt;</span>
        <input name="loc" type="radio" id="loc1" onClick="return formValidator();" value="1" checked="checked" />
        <label for="loc1">England / N.Ireland</label>
        
        <input name="loc" type="radio" id="loc2" onClick="return formValidator();" value="2" />
        <label for="loc2">Scotland</label>
        
        <input name="loc" type="radio" id="loc3" onClick="return formValidator();" value="3" />
        <label for="loc3">Wales</label>
        
    </div>
    <div class="radlabel"><span id="stampBlue"><strong>Step 2. Select Property Type</strong> &gt;&gt;</span>
        <input name="type" type="radio" id="type1" onClick="return formValidator();" value="1" checked="checked" />
        <label for="type1">Residential</label>
        <input type="radio" name="type" value="2" id="type2" onClick="return formValidator();" />
        <label for="type2">Second Home / Buy to Let</label>
        <input type="radio" name="type" value="3" id="type3" onClick="return formValidator();" />
        <label for="type3">Commercial</label>
    </div>
    <div id="comquest" class="comquest">Are you a First Time Buyer?
        <label>
            <input type="radio" name="ftb" value="yes" id="ftbyes" onClick="return formValidator();">yes</label>
        <label>
            <input name="ftb" type="radio" id="ftbno" value="no" checked="checked" onClick="return formValidator();">no</label>
    </div>
    
    <div class="flexContain">
        <div class="calc_1_of_3">
<div class="wid">
            
<div class="lab">&nbsp;</div>
<div class="bdown">&nbsp;</div>
<div class="bdown"><span id="stampBlue"><strong>Step 3. Purchase Price</strong></span></div>
<div class="bdown stampBgPrice"><div class="stampPrice">£
<input id="amount" type="text" maxlength="12" name="amount" size="12" value="" />

<button type="button"...

CSS

body {background-color:#fff;font-family:verdana;font-size:14px;}

.flexContain{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;justify-content:space-between;align-items:stretch;}

@media only screen and (max-width:960px){.flexContain{-webkit-flex-direction:column;flex-direction:column;width:100%;}}

.wid {}
.lab {text-align:left;height:27px;line-height: 19px;}
.ind {text-align:left;text-indent:11px;}
.bdown {text-align:left;height:37px;line-height: 29px;}
.bdown input {line-height: 28px;border: 1px solid #999;width:100px;}
.bdown button {line-height: 28px;border: 1px solid #999;width:90px;}
.wht {background-color:#fff;}

.stampBgPrice {background-image: url('data:image/gif;base64,R0lGODlhAQAjAIAAAP///5mZmSH5BAEHAAAALAAAAAABACMAAAIGhI8Zm90FADs=');background-repeat:repeat-x;background-position: right top;width: 100%;margin-top: auto;margin-bottom: auto;}
.stampBgPrice2 {background-image: url('data:image/gif;base64,R0lGODlhAQAjAIAAAP///5mZmSH5BAEHAAAALAAAAAABACMAAAIHhI8JEepYAAA7');background-repeat:repeat-x;background-position: right top;width: 100%;margin-top: auto;margin-bottom: auto;}
.stampBgPrice3 {background-image: url('data:image/gif;base64,R0lGODlhAQAjAIAAAP///5mZmSH5BAEHAAAALAAAAAABACMAAAIGhI8ZyQ0FADs=');background-repeat:repeat-x;background-position: right top;width: 100%;margin-top: auto;margin-bottom: auto;}
.stampPrice {background-color: #FFF;float: left;margin-top: auto;margin-bottom: auto;padding-right: 1em;height: 31px;}
.stampPrice2 {background-color: #FFF;margin-top: 3px;margin-bottom: auto;padding-right: 0.8em;padding-left: 0.8em;padding-top: 0px;padding-bottom: 0px;float: left;}
.stampTotal {height: 29px;border: 1px solid #690;margin-top: auto;margin:16px 0 20px 0;padding-top: 0px;padding-right: 0.5em;padding-bottom: 0px;padding-left: 0.5em;margin-right: 0.5em;width: 7em;color:#690;font-weight:bold;}
#stampGreen {color: #690;font-size: 1em;}
.stampInput1...

JavaScript

function formValidator(){

if (document.getElementById('type1').checked) {document.getElementById('comquest').className = "comquest2";}
else {document.getElementById('comquest').className = "comquest";}

document.getElementById("type1").checked&&(type=document.getElementById("type1").value),
document.getElementById("type2").checked&&(type=document.getElementById("type2").value),
document.getElementById("type3").checked&&(type=document.getElementById("type3").value),
document.getElementById("loc1").checked&&(loc=document.getElementById("loc1").value),
document.getElementById("loc2").checked&&(loc=document.getElementById("loc2").value),
document.getElementById("loc3").checked&&(loc=document.getElementById("loc3").value),

document.getElementById("ftbyes").checked&&(ans=1),
document.getElementById("ftbno").checked&&(ans=2);



var a=+document.calculator.amount.value,
b=+document.calculator.box1.value,
c=+document.calculator.box2.value,
d=+document.calculator.box3.value,
e=+document.calculator.box4.value,
f=+document.calculator.box5.value,
wal=+document.calculator.box6.value,
g=+document.calculator.sur.value;
+document.calculator.ftb.value,

// Residential - England - First Time Buyer

1==type&&1==loc&&1==ans&&

(document.getElementById("banda").innerHTML="0%",
document.getElementById("bandb").innerHTML="5%",
document.getElementById("bandc").innerHTML="5%",
document.getElementById("bandd").innerHTML="10%",
document.getElementById("bande").innerHTML="12%",
document.getElementById("btl").style.display="none",
document.getElementById("bandaT").innerHTML="Up to £300k",
document.getElementById("bandbT").innerHTML="Above £300k to £500k",
document.getElementById("bandcT").innerHTML="Above £500k to £925k",
document.getElementById("banddT").innerHTML="Above £925k to 1.5million",
document.getElementById("bandeT").innerHTML="Above...