JSFiddle - React, Tailwind, and code Playground

by Hardik Sisodia

HTML

<body>
<form action="" method="POST" enctype="multipart/form-data" id="form1" name="form1">
	<table border="2" style="box-shadow: 20px 20px 10px #000000; background-color: white;" align="center">
		<tr>
			<th>
				<p align="Left">Name : <sup><font color="red">*</font></sup></p>
			</th>
			<td>
				<input type="text" name="product_name" placeholder="Product Name" size="59" title="Enter the name of the product">
			</td>
		</tr>
		<tr>
			<th>
				<p align="Left">Description : <sup><font color="red">*</font></sup></p>
			</th>
			<td>
			<table border="0">
				<textarea name="product_desc" placeholder="Product Description" maxlength="300" rows="6" cols="61" title="Enter the Description of the product"></textarea>
			</td>
			</table>
		</tr>
		<tr>
			<th>
				<p align="Left">Size &amp; Weight<sup><font color="red">*</font></sup></p>
			</th>
			<th>
			<table border="1">
					<td title="Size 2.2">
						<label>
							<input type="checkbox" name="twopointtwosize" value="2.2size" title="Size 2.2" onClick="codename()">2.2<br>
							<input name="twopointtwosizeqty" type="text" disabled onKeyPress="return isNumberKey(event)" size="2" placeholder="QTY" maxlength="5">
						</label>
					</td>
					<td title="Size 2.4">
						<label>
							<input type="checkbox" name="twopointfoursize" value="2.4size" title="Size 2.4" onClick="codename()">2.4<br>
							<input type="text" size="2" name="twopointfoursizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)"  maxlength="5" disabled>
						</label>
					</td>
					<td title="Size 2.6">
						<label>
							<input type="checkbox" name="twopointsixsize" value="2.6size" title="Size 2.6" onClick="codename()">2.6<br>
							<input type="text" size="2" name="twopointsixsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
						</label>
					</td>
					<td title="Size 2.8">
						<label>
							<input type="checkbox" name="twopointeightsize" value="2.8size" title="Size 2.8"...

CSS

body
{
	background-image: url(../header_bg.jpg);
	background-size: cover;
}
textarea
{
	resize: none;
}
input[type=checkbox]
{
	cursor:pointer;
}
input[type=radio]
{
	cursor:pointer;
}
b
{
	cursor:default;
}
th
{
	cursor:default;
}
td
{
	cursor:default;
}
input[type=text]
{
	cursor:cell;
}
textarea
{
	cursor:cell;
}
input[type="reset"]
{
	width: 10em;  height: 2em;
	border:none;
	background: transparent;
	font-weight:bold;	
	cursor:pointer;
}
input[disabled]
{
	background: transparent;
	border: none;
	cursor: default;
}
input:disabled::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
}
input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
}
input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
}
input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
}

JavaScript

//select all checkbox script
checked=false;
function checkedAll (frm1) {var aa= document.getElementById('frm1'); if (checked == false)
{
checked = true
}
else
{
checked = false
}for (var i =0; i < aa.elements.length; i++){ aa.elements[i].checked = checked;}
}




//only numeric term script
function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
function isNumberKeyspecial(evt)
{
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}




//form reset
CZBanglesreset = function()
{
    document.getElementById("form1").reset();
	document.form1.twopointtwosizeqty.disabled=true;
	document.form1.twopointfoursizeqty.disabled=true;
	document.form1.twopointsixsizeqty.disabled=true;
	document.form1.twopointeightsizeqty.disabled=true;
	document.form1.twopointtensizeqty.disabled=true;
    document.getElementById("frm1").reset();
	document.getElementById("form2").reset();
}




//oncheck quantity
function...