JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<fieldset name="Group1">
				<legend>Group box</legend>
<table cellpadding="3" cellspacing="1" style="width: 100%;" dir="rtl">
	<tr>
	<td>
        <form id="myform" method="post" action="http://google.com/">
	<table style="width: 100%" dir="ltr" id="ft">
		<tr>
			<td>
				<input name="Text4" class="4ln" type="text" autofocus="autofocus" maxlength="4">
			</td>
			<td>
				<input name="Text3" class="4ln" type="text" maxlength="4">
			</td>
			<td>
				<input name="Text2" class="4ln" type="text" maxlength="4">
			</td>
			<td>
				<input name="Text1" class="last-4ln" type="text" maxlength="4">
			</td>
                <td dir="rtl" class="label1">شماره کارت</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input class="p1" name="Text5" type="password" maxlength="6"></td>
			<td dir="rtl" class="label">رمز شش رقمی</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input class="p2" name="Text6" type="password" maxlength="4"></td>
			<td dir="rtl" class="label">رمز چهار رقمی</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input class="ye" maxlength="2" placeholder="سال"></td>
			<td><input class="me" maxlength="2" placeholder="ماه"></td>
			<td dir="rtl" class="label">انقضا</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><a href="javascript:" onclick="captcha()">recode</a></td>
			<td id="captcha"></td>
			<td><input class="captcha" maxlength="4"></td>
			<td dir="rtl" class="label">کد کپچا</td>
			<td>&nbsp;</td>
		</tr>
	</table>
	</form>
	</td>
	<td style="width:150px; vertical-align:middle;text-align:center;background-color:#ddd;" >
<table cellpadding="3" cellspacing="1" style="width: 90px; height: 120px;" id="keyword" align="center">
	<tr>
		<td draggable="true" class="auto-style1" style="width: 30px; height: 30px">1</td>
		<td draggable="true" class="auto-style1" style="width: 30px; height: 30px">2</td>
		<td draggable="true" class="auto-style1" style="width:...

CSS

.label,.label1 {
	cursor:pointer;
}
#keyword td {
	font-style:italic;
	color:#999;
	text-align: center;
	cursor:not-allowed;
	background-color:#eee;
	border:1px #ccc outset;
	line-height:30px;
	font-size:11px;  
}
#keyword td.auto-style1 {
	font-style:normal;
	color:#000;
	cursor:pointer;
}
#keyword td.auto-style1:active {
	border:1px #bbb inset;
	background-color:#ccc;
	font-size:10px;  
}
#captcha {
	font-size:24px;
	text-decoration:line-through;
	background-color:#ddd;
}
#captcha .s1 {
	font-family: "Apple Boy BTN";
}
#captcha .s2 {
	color:#666;
	font-family:"Comic Sans MS";
}
#captcha .s3 {
	font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	font-style:italic;
}
#captcha .s4 {
	color:#336699;
	font-family:"Courier New", Courier, monospace;
}

JavaScript

$(document).ready(function() {
	$("input").focus(function() {
	$("input").removeClass("active").filter($(this)).addClass("active");
	});
	$("#keyword td.auto-style1").click(function() {
	var nu = $(this).text();
	$("input.active").each(function() {
	var v = $(this).val();
	var le = v.length;
	var mle = $(this).attr("maxlength");
	if(le == mle) { 
		if($(this).hasClass("4ln")) {
		$(this).removeClass("active").parent("td").next("td").find("input").addClass("active").val(nu);
		}
		else
		if($(this).hasClass("last-4ln")) {
		$(this).removeClass("active");
		$("input.p1").addClass("active").val(nu);
		}
		else
		if($(this).hasClass("p1")) {
		$(this).removeClass("active");
		$("input.p2").addClass("active").val(nu);
		}
		else
		if($(this).hasClass("p2")) {
		$(this).removeClass("active");
		$("input.me").addClass("active").val(nu);
		}
		else
		if($(this).hasClass("me")) {
		if(v<= 12) {
		$(this).removeClass("active");
		$("input.ye").addClass("active").val(nu);
		}
		else {
		$(this).val(nu);
		}
		}
		else
		if($(this).hasClass("ye")) {
		$(this).removeClass("active");
		$("input.captcha").addClass("active").val(nu);
		}
		else
		if($(this).hasClass("captcha")) {
		var ca = $("#captcha").text();
		if(v==ca) {
		$(this).removeClass("active");
		$("#myform").submit();
		}
		else {
		$(this).val(nu);
		}
		}
	}
	else {
	var newv = v + nu;
	$(this).val(newv);
	} 
	});
	});
	$("td.label").click(function() {
	$("input.active").removeClass("active");
	$(this).prev("td").find("input").addClass("active").focus();
	});
	$("td.label1").click(function() {
	$("input.active").removeClass("active");
	$(this).prevAll("td:first-child").find("input").addClass("active").focus();
	});
});
function captcha() {
var x = Math.floor((Math.random() * 10) - 1);
if(x<0) {
var x = 0;
}
var x1 = Math.floor((Math.random() * 10) - 1);
if(x1<0) {
var x1 = 0;
}
var x2 = Math.floor((Math.random() * 10) - 1);
if(x2<0) {
var x2 = 0;
}
var x3 = Math.floor((Math.random() * 10) - 1);
if(x3<0) {
var x3...