JSFiddle - React, Tailwind, and code Playground
by freedawirl
HTML
<!-- Begin Form 1 -->
<div class="n15_form n15_form1 n15_wrap">
<div class="n15_row">
<div class="z15_form_order_input_wrap">
<h4>Order Number :</h4>
<input type="text" class="n15_form_order_id" placeholder="" value="" readonly />
</div>
<div class="n15_customer_info_wrap">
<div>
<h4>CUSTOMER</h4>
<ul>
<li>
<input type="text" placeholder="Contact Name" />
</li>
<li>
<input type="text" placeholder="Company Name" />
</li>
<li>
<input type="text" placeholder="[Street Address]" />
</li>
<li>
<input type="text" placeholder="[City, ST ZIP Code]" />
</li>
<li>
<input type="text" placeholder="[Phone]" />
</li>
<li>
<input type="text" placeholder="Contact Email" />
</li>
</ul>
</div>
<div>
<h4>SHIP TO</h4>
<ul>
<li><input class="n15_input" type="text" placeholder="Same As Customer" readonly /> <input type="checkbox" /></li>
<li><input type="text" placeholder="[Company Name]" /></li>
<li><input type="text" placeholder="[Street Address]" /></li>
<li><input type="text" placeholder="[City, ST ZIP Code]" /></li>
<li><input type="text" placeholder="[Phone]" /></li>
</ul>
</div>
</div>
<div>
<div class="n15_table_options_wrap">
<div>
<h4>Payment Method</h4>
<select name="payment" id="n15_payment_method">
<option value="card">Card</option>
<option value="check">Check</option>
</select>
</div>
<div>
<h4>Delivery Required</h4>
<small>Customer will pick up at Transit Store</small>
<select name="delivery" id="n15_delivery">
<option value="">No</option>
<option value="">Yes</option>
</select>
</div>
</div>
</div>
<div class="n15_table_wrap">
<table class="n15_table_pass">
<tr class="n15_lblue n15_tablec">
<td colspan="2" style="text-transform:...CSS
*,
*::after,
*::before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
line-height: 22px;
font-size: 16px;
font-family: Arial, sans-serif;
}
.n15_wrap {
padding: 25px 15px;
width: 770px;
}
a {
color: #0068ac;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial;
}
h1 {
color: #000066;
font-size: 22px;
padding-bottom: 20px;
}
h2 {
width: 100%;
padding-bottom: 5px;
font-size: 22px;
color: #000066;
}
p, ul {
padding-bottom: 20px;
}
ul {
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}
.n15_heading {
border-bottom: 4px solid orange;
margin-bottom: 20px;
font-family: 'PT Sans', sans-serif;
}
.n15_text_wrap {
width: 60%;
float: left;
}
.n15_image_wrap {
float: right;
}
.n15_table_wrap {
padding: 25px 0;
}
.n15_table_header {
color: #1068ab;
letter-spacing: 1px;
font-weight: normal;
font-size: 30px;
margin: 0 0 10px;
}
.n15_table_header span {
color: #6fb132;
}
.n15_table_header small {
font-size: 18px;
color: #0b7dbb;
}
.n15_table_pass {
width: 100%;
color: #fff;
border-collapse: collapse;
}
.n15_table_pass tr {
height: 25px;
font-family: 'PT Sans', sans-serif;
}
.n15_table_pass tr:nth-child(3), .n15_table_pass tr:nth-child(4), .n15_table_pass tr:nth-child(5), .table_pass tr:nth-child(6) {
color: #000;
}
.n15_table_pass td {
text-align: center;
padding: 2px 0;
font-size: 17px;
font-family: 'PT Sans', sans-serif;
}
.n15_table_pass td:first-child {
text-align: left;
padding-left: 5px;
width: 155px;
}
.n15_government .n15_table_pass tr:first-child td {
font-size: 14px;
}
.n15_contact_wrap {
padding-bottom: 20px;
}
.n15_btn_wrap {
display: inline-block;
margin: 0 20px 0 0;
}
.n15_btn_wrap span {
margin: 0 0 0 20px;
font-size: 14px;
color: #0068ac;
}
.n15_btn_wrap a {
text-decoration: none;
color: #fff;
font-size: 18px;
}
.n15_btn{
border-radius: 20px;
letter-spacing: 1px;
text-align: center;
font-family: Helvetica;
background: #063684;
color: #fff;
font-weight: bold;
border:...JavaScript
// Variables for the Business form
var n15_qty_1b = $('.n15_qty_1b').val();
var n15_qty_2b = $('.n15_qty_2b').val();
var n15_qty_3b = $('.n15_qty_3b').val();
var n15_qty_4b = $('.n15_qty_4b').val();
var n15_p_1b_single_price
var n15_p_2b_single_price
var n15_p_3b_single_price
var n15_p_4b_single_price
var n15_total_price_1b = $('.n15_total_price_1b').val();
var n15_total_price_2b = $('.n15_total_price_2b').val();
var n15_total_price_3b = $('.n15_total_price_3b').val();
var n15_total_price_4b = $('.n15_total_price_4b').val();
n15_total_price_1b = n15_total_price_1b.replace("$", "");
n15_total_price_2b = n15_total_price_2b.replace("$", "");
n15_total_price_3b = n15_total_price_3b.replace("$", "");
n15_total_price_4b = n15_total_price_4b.replace("$", "");
var n15_total_price_b
var n15_qty_total_b
var n15_subtotal_price_b
var n15_processing
var n15_final_price_b
// Variables for the Higher-Ed form
var n15_qty_1e = $('.n15_qty_1e').val();
var n15_qty_2e = $('.n15_qty_2e').val();
var n15_qty_3e = $('.n15_qty_3e').val();
var n15_qty_4e = $('.n15_qty_4e').val();
var n15_p_1e_single_price
var n15_p_2e_single_price
var n15_p_3e_single_price
var n15_p_4e_single_price
var n15_total_price_1e = $('.n15_total_price_1b').val();
var n15_total_price_2e = $('.n15_total_price_2b').val();
var n15_total_price_3e = $('.n15_total_price_3b').val();
var n15_total_price_4e = $('.n15_total_price_4b').val();
n15_total_price_1e = n15_total_price_1e.replace("$", "");
n15_total_price_2e = n15_total_price_2e.replace("$", "");
n15_total_price_3e = n15_total_price_3e.replace("$", "");
n15_total_price_4e = n15_total_price_4e.replace("$", "");
var n15_total_price_e
var n15_qty_total_e
var n15_subtotal_price_e
var n15_final_price_e
// Variables for both forms
var n15_processing = 12.00;
// Jquery for Form 1 First table row
$('.n15_qty_1b').on('change',...