JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="fiddle">Bridging Loan Calculator 1.0</div>
<form id="calculator" method="post" name="calculator" onsubmit="return formValidator();">
<div class="calcon" id="calid">
<div class="calContLeft"><div class="calTit">Bridging Loan Calculator</div><div class="calLeft">
<div class="rbit"> </div><div class="lbit"> </div><div class="label">Bridging Loan Amount Required</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)"><div class="help ttgreen"> </div><span class="qtip">The total 'net' loan amount that you require.</span></a>
<div class="pnd">£</div><div class="frm"><input id="amount" type="tel" name="amount" value="" onkeyup="this.value = numFormat(this.value)"/></div>
<div class="clear"></div>
<div class="rbit"> </div><div class="lbit"> </div><div class="label">Term Required</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)"><div class="help ttgreen"> </div><span class="qtip">The maximum number of months you require the loan for.</span></a>
<div class="pnd"> </div><div class="frm"><select id="term" name="term" size="1">
<option value="1">1 Month</option>
<option value="2">2 Months</option>
<option value="3">3 Months</option>
<option value="4">4 Months</option>
<option value="5">5 Months</option>
<option value="6">6 Months</option>
<option value="7">7 Months</option>
<option value="8">8 Months</option>
<option value="9">9 Months</option>
<option value="10">10 Months</option>
<option value="11">11 Months</option>
<option selected="selected" value="12">12 Months</option>
<option value="13">13 Months</option>
<option value="14">14 Months</option>
<option value="15">15 Months</option>
<option value="16">16 Months</option>
<option value="17">17 Months</option>
<option value="18">18 Months</option>
<option value="19">19 Months</option>
<option value="20">20 Months</option>
<option value="21">21 Months</option>
<option value="22">22...CSS
.fiddle {background-color:#000;color:#fff;padding:2px 6px;margin:0 0 10px 0;}
.calcon, .calcon2 {margin:auto;font-family:arial;font-size:14px;max-width:688px;}
.calContLeft {float:left;background-color:#fff;width:46.5%;margin-right:0.5%;}
.calContRight {float:left;background-color:#fff;width:52.5%;margin-left:0.5%;}
.calLeft {padding:10px;}
.calRight {font-size:16px;}
.calTit {background-color:#405C9E;color:#fff;text-indent:10px;padding:5px 0;font-weight:bold;margin-bottom:10px;font-size:16px;}
.results {width:100%;border-spacing: 0;border-collapse: separate;padding:10px 0;}
.results td {padding:4px 0;}
.resT {height:5px;padding:0;}
.other {background-color:#405C9E;color:#fff;text-indent:10px;font-weight:bold;padding:2px 0;}
.clear {clear:both;}
.pnd, .lbit {float:left;}
.help, .rbit {float:right;}
.rbit, .lbit {width:30px;}
.pnd, .help {line-height:40px;height:40px;width:30px;text-align:center;background-color:#405C9E;color:#fff;font-weight:bold;}
.ttgreen {background-color:#00A3D9;margin-left:3px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAATlBMVEUAAAD8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vtBtc/dAAAAGXRSTlMABPLJmYF1Uz+vb0cW5+S8uZOIamM6LSELBgohPwAAAEtJREFUCB0FwYcBwkAABCC+pWvsevsvKoD1VuCVTLAmEyxtAADLAfuZwe9Rk8HoPZkp7qkflJZW8L2kKyzJNG88k9p2ttR+4H2d8QfB0ANY90orPAAAAABJRU5ErkJggg==');background-repeat: no-repeat;background-position:center center;}
.ttgreen2 {background-color:#00A3D9;margin-left:3px;}
.label {font-size:16px;margin-bottom:2px;}
.frm {height:38px;overflow: hidden;border:1px solid #405C9E;padding:0 10px;background-color:#fff;margin-bottom:10px;}
.frm input, .frm select {width:100%;border:0;margin:0;font-size:16px;}
.frm input {height:37px;}
.frm select {height:39px;border:0px;outline:0px;-webkit-appearance: none;-moz-appearance: none;text-indent: 1px;text-overflow: '';background-color: transparent;}
.textr {text-align:right;}
.hide...JavaScript
function showDiv(elem){
if(elem.value == 1) {
document.getElementById('prop2').style.display = "none";
document.getElementById('prop3').style.display = "none";
document.getElementById('prop4').style.display = "none";
document.getElementById('prop5').style.display = "none";
document.getElementById('prop6').style.display = "none";
document.calculator.prop2Val.value = "";
document.calculator.prop3Val.value = "";
document.calculator.prop4Val.value = "";
document.calculator.prop5Val.value = "";
document.calculator.prop6Val.value = "";
document.calculator.prop2Mort.value = "";
document.calculator.prop3Mort.value = "";
document.calculator.prop4Mort.value = "";
document.calculator.prop5Mort.value = "";
document.calculator.prop6Mort.value = ""; }
if(elem.value == 2) {
document.getElementById('prop2').style.display = "block";
document.getElementById('prop3').style.display = "none";
document.getElementById('prop4').style.display = "none";
document.getElementById('prop5').style.display = "none";
document.getElementById('prop6').style.display = "none";
document.calculator.prop3Val.value = "";
document.calculator.prop4Val.value = "";
document.calculator.prop5Val.value = "";
document.calculator.prop6Val.value = "";
document.calculator.prop3Mort.value = "";
document.calculator.prop4Mort.value = "";
document.calculator.prop5Mort.value = "";
document.calculator.prop6Mort.value = ""; }
if(elem.value == 3) {
document.getElementById('prop2').style.display = "block";
document.getElementById('prop3').style.display = "block";
document.getElementById('prop4').style.display = "none";
document.getElementById('prop5').style.display = "none";
document.getElementById('prop6').style.display = "none";
document.calculator.prop4Val.value = "";
document.calculator.prop5Val.value = "";
document.calculator.prop6Val.value = "";
...