JSFiddle - React, Tailwind, and code Playground

by David Lu

HTML

<body style="margin: 20px 50px;">

<!-- W4 Instructions -->
<div class="clearfix" >	
<div class = "column-left">
	<h1> <b>Form W-4 (2016)</b></h1>
	<hr style="height:5px;border:none;color:#000;background-color:#000;" />
<p>	<b>Purpose.</b>$[SP]  Complete Form W-4 so that your employer
can withhold the correct federal income tax from your
pay. Consider completing a new Form W-4 each year
	and when your personal or financial situation changes.</p>
<p>	<b>Exemption from withholding.</b>$[SP]  If you are exempt,
complete only lines 1, 2, 3, 4, and 7 and sign the form
to validate it. Your exemption for 2016 expires
February 15, 2017. See Pub. 505, Tax Withholding
	and Estimated Tax.</p>
<p>	<b>Note:</b>$[SP]  If another person can claim you as a dependent
on his or her tax return, you cannot claim exemption
from withholding if your income exceeds $1,050 and
includes more than $350 of unearned income (for
	example, interest and dividends). </p>
<p class = "indent"><b><i>Exceptions.</i></b>$[SP]  An employee may be able to claim
exemption from withholding even if the employee is a
	dependent, if the employee:</p>
<ul>
	<li>Is age 65 or older, </li>
	<li>Is blind, or </li>
	<li>Will claim adjustments to income; tax credits; or
	itemized deductions, on his or her tax return.</li>
</ul>
</div>
	
<div class = "column-center">
<p>The exceptions do not apply to supplemental wages
	greater than $1,000,000.</p>
<p>	<b>Basic instructions.</b>$[SP]  If you are not exempt, complete
	the <b>Personal Allowances Worksheet</b>$[SP]  below. The
	worksheets on page 2 further adjust your
	withholding allowances based on itemized
	deductions, certain credits, adjustments to income,
	or two-earners/multiple jobs situations. </p>

<p class = "indent">Complete all worksheets that apply. However, you
	may claim fewer (or zero) allowances. For regular
	wages, withholding must be based on allowances
	you claimed and may not be a flat amount or
	percentage of wages. </p>
	
<p>	<b>Head of...

CSS

<!-- CSS W4 Instructions -->

.clearfix:after { 
   content: " ";
   visibility: hidden;
   display: block; 
   height: 0; 
   clear: both;
  }
	
.column-left{ float: left; width: 33%; padding: 0px 20px; }
.column-right{ float: right; width: 33%; padding: 30px 20px 0px 20px; }
.column-center{float: left; width: 33%; padding: 30px 20px 0px 20px; }
.indent { text-indent: 20px; }

#personal_allowance_title {border-top: 2px solid black; border-bottom: 2px solid black; }
#deductions_adjustments_title {border-top: 2px solid black; border-bottom: 2px solid black; }	
#multiple_jobs_title {border-top: 2px solid black; border-bottom: 2px solid black; }
	
	
<!--CSS Employee's Withholding Certificate -->
.Row{
	 display: -webkit-flex;
	 display:         flex;
     -webkit-align-items: center;
     align-items: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-flex-flow: row;
	 flex-flow: row;
     
	 margin: auto;
     width: 100%;
	 border-bottom: 2px solid black;
	}
 
.col-left{ order:1;  width: 20%; display:flex; justify-content: center;}
.col-center{order:2; margin:auto; padding: 10px 100px; width: 60%; display:flex; justify-content: center; }
.col-right{ order:3; width: 20%; display:flex; justify-content: center; }

.Bottom_Row{
	 display: -webkit-flex;
	 display:         flex;
     -webkit-align-items: center;
     align-items: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-flex-flow: row;
	 flex-flow: row;
     margin: auto;
     width: 100%;}
	
.bottom_col-left{ order:1;  width: 50%; display:flex;  padding: 0 40px 0 0; vertical-align: top;}
.bottom_col-right{ order:2; width: 50%; display:flex; padding: 0 0 0 40px; vertical-align: top;}
	
p.title {line-height: 0.5em;}
	
<!-- CSS Personal Allowance Table -->
table {
    font-size: 15px;
    border-collapse: collapse;
    width: 100%;
}
	
	
td.question {
	width: 80%;
    border: 1px solid #dddddd;
    text-align: left;
    padding:...

JavaScript

function Redirect() {
  window.location="https://dev21734.service-now.com/fedhr/fed_splash_new.do#Tasks";}
               
function submitRequest()
{
var gr = new GlideRecord('u_form_w4_2016');
gr.initialize();
	gr.u_personal_allowance_a = document.getElementById('A').value;
	gr.u_personal_allowance_b = document.getElementById('B').value;
	gr.u_personal_allowance_c = document.getElementById('C').value;
	gr.u_personal_allowance_d = document.getElementById('D').value;
	gr.u_personal_allowance_e = document.getElementById('E').value;
	gr.u_personal_allowance_f = document.getElementById('F').value;
	gr.u_personal_allowance_g = document.getElementById('G').value;
	gr.u_personal_allowance_h = document.getElementById('H').value;

	gr.u_deductions_adjustments_1 = document.getElementById('deductions_adjustments_1').value;
	gr.u_deductions_adjustments_2 = document.getElementById('deductions_adjustments_2').value;
	gr.u_deductions_adjustments_3 = document.getElementById('deductions_adjustments_3').value;
	gr.u_deductions_adjustments_4 = document.getElementById('deductions_adjustments_4').value;
	gr.u_deductions_adjustments_5 = document.getElementById('deductions_adjustments_5').value;
	gr.u_deductions_adjustments_6 = document.getElementById('deductions_adjustments_6').value;
	gr.u_deductions_adjustments_7 = document.getElementById('deductions_adjustments_7').value;
	gr.u_deductions_adjustments_8 = document.getElementById('deductions_adjustments_8').value;
	gr.u_deductions_adjustments_9 = document.getElementById('deductions_adjustments_9').value;
	gr.u_deductions_adjustments_10 = document.getElementById('deductions_adjustments_10').value;
	
	gr.u_two_earners_1 = document.getElementById('multiple_jobs_1').value;
	gr.u_two_earners_2 = document.getElementById('multiple_jobs_2').value;
	gr.u_two_earners_3 = document.getElementById('multiple_jobs_3').value;
	gr.u_two_earners_4 = document.getElementById('multiple_jobs_4').value;
	gr.u_two_earners_5 =...