JSFiddle - React, Tailwind, and code Playground

by flaiming

HTML

<div id="rocaptcha_div">
    <div class="jsonp"></div>
<table cellspacing="0" cellpadding="0" id="rocaptcha_base" style="border-collapse: separate; background-color: #eeeeee; border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px;
box-shadow:inset 0 0 10px 0px #DDD; padding: 2px 4px 3px 4px;">
	<tbody><tr>
		<td style="width: 220px; height: 220px;  position: relative; display: block; float: left; padding: 10px;">
			<div style="cursor: pointer; width: 220px; height: 220px; position: absolute; top: 5px; left: 10px; border-radius: 110px 110px 110px 110px; border: 2px solid rgb(100, 147, 0); background: url(&quot;http://rocaptcha.com/media/rocaptcha/cache/775a81c2ff4e6fb.png&quot;) no-repeat scroll center center rgb(100, 147, 0); transform: rotate(0deg); -webkit-transform: translateZ(0);">
			</div>
		</td>
		
		<td style="width: 100px;padding: 10px; display: block; float: right;">
			
			
			<a target="_blank" style="color: #649300; font-weight: bold; font-size: 18px; position: relative; left: -13px;" href="http://rocaptcha.com">RoCAPTCHA</a>
			
			<ul style="list-style: none; margin: 5px 0 0 0; padding: 0;">
				<li style="padding: 0 0 4px 0;">
					<a style="display: block; padding: 5px 5px 6px 38px; background-color: #649300; color: white; border-radius: 5px; font-size: 16px; background: #649300 url('http://rocaptcha.com/media/images/reload.png') 5px 3px no-repeat; " data-action="reload" href="">Reload</a>
				</li>
				<li style="padding: 0 0 4px 0;">
					<a target="_blank" data-elem="author" style="display: block; padding: 5px 5px 6px 38px; background-color: #649300; color: white; border-radius: 5px; font-size: 16px; background: #649300 url('http://rocaptcha.com/media/images/user.png') 5px 3px no-repeat; " href="http://rocaptcha.com/author/775a81c2ff4e6fb/">Author</a>
				</li>
				<li style="padding: 0 0 4px 0;">
					<a target="_blank" style="display: block; padding: 5px 5px 6px 38px; background-color: #649300; color: white;...

JavaScript

//<![CDATA[ 
var RoCaptcha = {
	OK: "OK",
	ERROR: "ERROR",
	PASSED: "PASSED",
	FAILED: "FAILED",
	BAD_PUBLIC_KEY: "BAD_PUBLIC_KEY",
	BAD_PRIVATE_KEY: "BAD_PRIVATE_KEY",
	TIMEOUT: "TIMEOUT",
	WRONG_RESPONSE: "WRONG_RESPONSE",
	ERROR_FORM: "ERROR_FORM",
	WIDTH: 220,
	HEIGHT: 220,
	PREFIXES: ['moz', 'webkit', 'o', 'ms', ''],
	image_angle: 0,
	old_angle: 0,
	box_coords: {x:0, y:0},
    last_coords: {x:0, y:0},
	elem_image: null,
	elem_larrow: null,
	elem_rarrow: null,
	keep_rotating: false,
	SPEED: 1.5,
	MAX_SPEED: 7,
    wrapper_id: "",
	init: function (wrapper_id) {
		
		var self = RoCaptcha;
        self.wrapper_id = wrapper_id;
		
		//get form
		new WSAjax('http://rocaptcha.com/api/form/'+'?key=88d586840a18494c604b6d9aaf1e63&lang=en', function(data) {
			console.log(data);
			if (data.status !== self.OK) {
				self.displayError(data.status);
				return;
			}
			
			//insert HTML form
			//document.getElementById(wrapper_id).innerHTML = data.content;
			
			var base = self.getBaseElem();
			var tds = base.getElementsByTagName('td');
			self.elem_image = tds[0].children[0];
			
			//add rotation events
			self.elem_image.addEventListener('touchstart',self.mouseDown,false);
            self.elem_image.addEventListener('mousedown',self.mouseDown,false);
			self.elem_image.addEventListener('touchend',self.mouseUp,false);
            self.elem_image.addEventListener('mouseup',self.mouseUp,false);
			
			//add event for reloading image
			var reloadElem = tds[1].querySelector('a[data-action="reload"]');
			reloadElem.addEventListener('click', self.reloadImage, false);
		    
		    //load captcha hash and image
			//self.reloadImage();

		//}).error(function(jqXHR, textStatus, errorThrown) {
		//	self.displayError(self.ERROR_FORM);
		//});
	},
	
	mouseDown: function (event) {
        event.preventDefault();
		var self = RoCaptcha;
		self.old_angle = self.getAngleByEvent(event);
		self.getImageElem().addEventListener('touchmove',self.mouseMove,false);
       ...