JSFiddle - React, Tailwind, and code Playground

by Satendra Mishra

HTML

<form name="newpurchase" action="" method="post" enctype="application/x-www-form-urlencoded">
	
	<table align="center">
		<tr>
			<td><div id="thismenu"><span id="title">Add New Customer</span>
					<button type="submit" aspect='default'  name="submit"  id="submitt" value="Add New Product"><img src="../js/interface/themes/icons/filesave.png" height="12"><span style="margin-left:2px; font-size:12px; font-weight:bold;">Save Product</span></button>
				</div></td>
		</tr>
		<tr>
			<td><table align="center" id="mainTable">
					<tr>
						<th colspan="2" align="left">Supplier Detail</th>
						<th colspan="2" align="left">Delivery &amp; Payment Detail</th>
					</tr>
					<tr>
						<td width="140"><label for="supplier_name">Supplier:</label></td>
						<td width="270"><select name="supplier_name" class="select" required>
								<option value=""></option>
								
								<option value=""></option>
								
							</select></td>
						<td width="140"><label for="creditAs_on">Purchase Order Date:</label></td>
						<td width="270"><input type="text" name="creditAs_on" id="datepicker"/></td>
					</tr>
					<tr>
						<td><label for="contact_person">Contact Person:</label></td>
						<td><input type="text" name="contact_person"  id="contact_person" readonly/></td>
						<td><label for="delivery_time">Delivery Period:</label></td>
						<td><select name="delivery_time" id="select" required>
								<option value="-5" selected>With in 7 Days</option>
								<option value="-13">With in 15 Days</option>
								<option value="-28">With in 1 Month</option>
							</select></td>
					</tr>
					<tr>
						<td><label for="supplier_Phone">Consumer Phone:</label></td>
						<td><input type="text" name="supplier_phone" readonly id="supplier_phone" onkeypress="return isNumberKey(event)"/></td>
						<td><label for="payment_mode">Payment Mode:</label></td>
						<td><select name="payment_mode" id="select" required>
								<option value="Cheque">By...

CSS

@charset "utf-8";

#datagridInput {
	border: none;
	width: 100%;
	height: 100%;
	font-family: "Rupee Foradian";
	font: "Rupee Foradian";
	font-size: 12px;
	color: #444;
	text-overflow:ellipsis;
}
#productList tr td input:not([name="purchase_description"]) {
	text-align: right;
}
#productList tr td input:[name="purchase_description"] {
 padding-left:4px;
}
#datagridInput:disabled, #datagridInput:active, #datagridInput:hover, #datagridInput:focus {
	background-color: #fff;
	border: none;
	width: 100%;
}
@font-face {
	font-family: 'Rupee Foradian';
	src: url('Rupee_Foradian.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'ElegantIcons';
	src: url('fonts/ElegantIcons.eot');
	src: url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'), url('fonts/ElegantIcons.woff') format('woff'), url('fonts/ElegantIcons.ttf') format('truetype'), url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}
[data-icon]:before {
	font-family: 'ElegantIcons';
	content: attr(data-icon);
	font-size: 15px;
	color: #0E2D5F;
}
#thismenu span[id="title"] {
	font-size: 16px;
	color: #FFBE7D;
	font-weight: bold;
	display: inline-block;
	padding: 0px 5px 5px 5px;
	border: 1px solid #0052A4;
	background: #00376F;
	background-image: linear-gradient(#0062C4, #00376F);
	box-shadow: 0 1px 1px #777;
}
#thismenu span[id="title"]:hover {
	font-size: 16px;
	color: #FF8000;
	font-weight: bold;
	display: inline-block;
	padding: 0px 5px 5px 5px;
	border: 1px solid #0052A4;
	background: #00376F;
	background-image: linear-gradient(#0062C4, #00376F);
	box-shadow: 0 1px 1px #777;
	cursor: default;
}
#thismenu {
	min-height: 15px;
	border: 1px solid #0052A4;
	-webkit-box-sizing: content-box;
	-moz-box-sizing : content-box;
	box-sizing : content-box;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-moz-box-shadow:...