JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<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="label">Bridging Loan Amount Required</div><div class="clear"></div><a href="javascript:;" class="tt" onclick="tog(this)"><div class="help ttgreen">&nbsp;</div><span class="qtip">The total ‘net’ loan amount that you are looking to borrow. This is the amount you are expecting to receive before interest or any other costs have been added.</span></a> <div class="frm"><input id="amount" type="tel" name="amount" value="£ " onkeyup="this.value=numFormat(this.value)" onclick="check();"/></div><div class="clear"></div><div class="label">Term Required</div><div class="clear"></div><a href="javascript:;" class="tt" onclick="tog(this)"><div class="help ttgreen">&nbsp;</div><span class="qtip">The maximum number of months that you require the loan for.</span></a> <div class="frm"><select id="term" name="term" size="1" onchange="copy()"><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 Months</option><option value="23">23 Months</option><option value="24">24 Months</option></select></div><div class="clear"></div><div...

CSS

.calTit,.other{text-indent:10px}.nobro,.tt2 .qtip,.ttgreen{background-repeat:no-repeat}
	
	.calcon,.calcon2{margin:auto;font-family:arial;font-size:14px;display: -ms-flexbox;display: -webkit-flex;display: flex;}.calRight,.calTit,.label{font-size:16px}.calContLeft{float:left;background-color:#ECF5FF;border:solid #405C9E;border-width:0 0 2px 0;width:46.5%;margin-right:.5%}.calContRight{float:left;background-color:#ECF5FF;border:solid #405C9E;border-width:0 0 2px 0;width:52.5%;margin-left:.5%}.calTit,.help,.other,.pnd{background-color:#405C9E;color:#fff;font-weight:700}.calLeft{padding:10px}.calTit{padding:5px 0;margin-bottom:10px}.results{width:100%;border-spacing:0;border-collapse:separate;padding:10px 0}.help,.lbit,.pnd,.rbit{width:30px}.results td{padding:4px 0}.resT{height:5px;padding:0}.other{padding:2px 0}.clear{clear:both}.lbit,.pnd{float:left}.help,.rbit{float:right}.help,.pnd{line-height:40px;height:40px;text-align:center}.ttgreen,.ttgreen2{background-color:#00A3D9;margin-left:3px}.ttgreen{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-position:center center;border-radius:0 5px 5px 0}.label{margin-bottom:2px}.frm{height:38px;overflow:hidden;border:1px solid #405C9E;padding:0 10px;background-color:#fff;margin-bottom:10px;border-radius:5px 0 0 5px}.frm input,.frm select{width:100%;border:0;margin:0;font-size:16px}.frm input{height:37px}.frm...