JSFiddle - React, Tailwind, and code Playground

by shijukbabu

HTML

<form action="UploadConfiguration" method="get">
		
		<div>
			<div
				style="border: 1px solid blue; position: absolute; left: 300px; top: 100px; width: 600px; height: 400px; overflow: auto;">
				<div style="background-color: blue; clear: both; text-align: left;">
					<font color="white"><b>Target Fields</b></font>
				</div>
				<br>
				<table>
					
					<tr align="left">
						<td><label>RegID :</label></td>
						<td><div class="csv">
								<input type="text" id="RegID"
									name="RegID" />
							</div></td>
					</tr>
					
					<tr align="left">
						<td><label>RegName :</label></td>
						<td><div class="csv">
								<input type="text" id="RegName"
									name="RegName" />
							</div></td>
					</tr>
					
					<tr align="left">
						<td><label>RegDate :</label></td>
						<td><div class="csv">
								<input type="text" id="RegDate"
									name="RegDate" />
							</div></td>
					</tr>
					
					<tr align="left">
						<td><label>RegDesc :</label></td>
						<td><div class="csv">
								<input type="text" id="RegDesc"
									name="RegDesc" />
							</div></td>
					</tr>
					
					<tr align="left">
						<td><label>RegDetails :</label></td>
						<td><div class="csv">
								<input type="text" id="RegDetails"
									name="RegDetails" />
							</div></td>
					</tr>
					
					<tr>
					<td></td>
					<td><button type="submit" class="btn btn-primary">Continue</button></td>
					</tr>
				</table>
				
			</div>

			<div
				style="border: 1px solid blue; position: absolute; left: 50px; top: 100px; width: 200px; height: 350px; overflow-x: hidden; overflow-y: auto;">
				<div style="background-color: blue; clear: both; text-align: left;">
					<font color="white"><b>Source Fields</b></font>
				</div>
				<br>
				<table>
					
					<tr align="center">
						<td>
							<div class="col">
								<label id="Requirements ID">Requirements ID</label>
							</div>
						</td>
					</tr>
					
					<tr...

CSS

body { font: bold 12px arial; }
span { float: left; margin-top: 17px; text-align: center; width: 100%; }

#items { margin-top: 10px; width: 100%; }
.col { background: #cdcdcd; color: #3b3b3b; float: left; margin-right: 10px; }
.over { background-color: #cedae3; }

JavaScript

$('.col').draggable({
			revert : true,
			helper : 'clone',
			start : function(event, ui) {
				$(this).fadeTo('fast', 0.5);
			},
			stop : function(event, ui) {
				$(this).fadeTo(0, 1);
			}
		});

		$('.csv').droppable({
			hoverClass : 'active',
			drop : function(event, ui) {
				$(this).addClass("ui-state-highlight");
				var draggableId = ui.draggable.children(":first").attr("id");
				var droppableId = $(this).children(":first").attr("id");
				document.getElementById(droppableId).value = draggableId;
		});