JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="header-options right clearfix">					
						<div class="login-options right">
													
							<div class="button-wrap left tooltip login-button">
								<a href="#" class="button dark active"><span><span class="button-icon login"></span>Sign In</span></a>
								<div class="tooltip-wrap" style="display: block;">
									<div class="tooltip-text">
										<form action="http://themextemplates.com/demo/academy/wp-admin/admin-ajax.php" class="login-form popup-form" method="POST">
											<div class="message"></div>
											<div class="field-wrap"><input type="text" name="user_login" value="Demo"></div>
											<div class="field-wrap"><input type="password" name="user_password" value="demo"></div>
											<input type="hidden" name="login_nonce" class="nonce" value="2191c01839">
											<input type="hidden" class="action" value="themex_login">
											<div class="button-wrap left nomargin">
												<a href="#" class="button submit-button">
													<span>Sign In</span>
												</a>
											</div>
																						<div class="button-wrap switch-button left">
												<a href="#" class="button dark" title="Password Recovery">
													<span><span class="button-icon help"></span></span>
												</a>
											</div>											
										</form>
									</div>
								</div>
								<div class="tooltip-wrap password-form" style="display: none;">
									<div class="tooltip-text">
										<form action="http://themextemplates.com/demo/academy/wp-admin/admin-ajax.php" class="password-form popup-form" method="POST">
											<div class="message"></div>
											<div class="field-wrap"><input type="text" name="user_email" value="Email"></div>
											<input type="hidden" name="password_nonce" class="nonce" value="79695b954b">
											<input type="hidden" class="action" value="themex_password">
											<div class="button-wrap left nomargin">
												<a href="#" class="button...

CSS

QGNoYXJzZXQgInV0Zi04IjsKCi8qClRoZW1lIE5hbWU6IEFjYWRlbXkKVGhlbWUgVVJJOiBodHRwOi8vdGhlbWV4dGVtcGxhdGVzLmNvbS9kZW1vL2FjYWRlbXkKTGljZW5zZTogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYW5kIFRoZW1lZm9yZXN0IExpY2Vuc2UKTGljZW5zZSBVUkk6IGh0dHA6Ly90aGVtZWZvcmVzdC5uZXQvbGljZW5zZXMvcmVndWxhcl9leHRlbmRlZApEZXNjcmlwdGlvbjogTGVhcm5pbmcgTWFuYWdlbWVudCBXb3JkUHJlc3MgVGhlbWUuCkF1dGhvcjogVGhlbWV4CkF1dGhvciBVUkk6IGh0dHA6Ly93d3cudGhlbWVmb3Jlc3QubmV0L3VzZXIvdGhlbWV4LwpWZXJzaW9uOiAxLjYKVGFnczogbGVhcm5pbmcsIHRlYWNoaW5nLCBlZHVjYXRpb24sIHN0dWR5aW5nLCB0dXRvcmluZwoqLwoKLyotLS0tLS0tLS0tLS0tLS0tLS0tLUNTUyBTdHJ1Y3R1cmUtLS0tLS0tLS0tLS0tLS0tLS0tCgoxLiBSRVNFVC9HTE9CQUwKCQlHbG9iYWwgU3R5bGVzCgkJRm9ybSBFbGVtZW50cwoJCU1pc2MgU3R5bGVzCgkJCjIuIENVU1RPTSBFTEVNRU5UUwoJCUJ1dHRvbnMKCQlGb3JtcwoJCUltYWdlcwoJCUxpc3RzCgkJUGxheWVyCgkJU3Vic3RyYXRlCgkJVGFicwoJCVRvZ2dsZXMKCQlUb29sdGlwcwoJCUdvb2dsZSBNYXAKCQkKMy4gTEFZT1VUCgkJQ29sdW1ucwoJCUhlYWRlcgoJCQktIERyb3Bkb3duIE1lbnUKCQkJLSBTZWxlY3QgTWVudQoJCQktIFNlYXJjaCBGb3JtCgkJCS0gTG9naW4gRm9ybQoJCQktIFNoYXJlIFRvb2x0aXAKCQkJLSBTb2NpYWwgTGlua3MKCQlDb250ZW50CgkJRm9vdGVyCgkJCjQuIFBBR0VTCgkJQ291cnNlCgkJCS0gUHJldmlldwoJCQktIExpc3RpbmcKCQkJLSBQbGFuCgkJCS0gQ2VydGlmaWNhdGUKCQlMZXNzb24KCQkJLSBMaXN0aW5nCgkJCS0gUXVlc3Rpb25zCgkJCS0gUXVpenplcwoJCUJsb2cKCQkJLSBQb3N0CgkJCS0gQ29tbWVudHMKCQkJLSBQYWdpbmF0aW9uCgkJVXNlcnMKCQkJLSBQcm9maWxlCgkJCS0gRXhwZXJ0cwoJCQktIFRlc3RpbW9uaWFscwoJCQo1LiBTTElERVJTCgkJUGFyYWxsYXggU2xpZGVyCgkJQm94ZWQgU2xpZGVyCgkJCjUuIFdJREdFVFMKNi4gV09PQ09NTUVSQ0UKNy4gUkVTUE9OU0lWRSBTVFlMRVMKOC4gQ1NTMyBFRkZFQ1RTCjkuIElFIEZJWEVTCgotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0qLwoKLyogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09IFJFU0VUL05PUk1BTElaRSA9PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi8KCmJvZHkgewoJcG9zaXRpb246cmVsYXRpdmU7CiAgICBiYWNrZ3JvdW5kOiNmZmY7CiAgICBjb2xvcjojNDQ0OwoJbGV0dGVyLXNwYWNpbmc6MDsKICAgIGZvbnQtd2VpZ2h0Om5vcm1hbDsKICAgIGZvbnQtc3R5bGU6bm9ybWFsOwogICAgZm9udC1zaXplOjEzcHg7CiAgICBmb250LWZhbWlseTpPcGVuIFNhbnMsIEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7CiAgICBsaW5lL...

JavaScript

//Theme Options
var themeOptions = {
		siteWrap: '.site-wrap',
		footerWrap: '.footer-wrap',
		mainMenu: '.header-navigation',
		selectMenu: '.select-menu',
		courseRating: '.course-rating',
		themexSlider: '.themex-slider',
		parallaxSliderClass: 'parallax-slider',
		toolTip: '.tooltip',
		toolTipWrap: '.tooltip-wrap',
		tooltipSwitch: '.switch-button',
		button: '.button',
		submitButton: '.submit-button',
		printButton: '.print-button',
		facebookButton: '.facebook-button',
		toggleTitle: '.toggle-title',
		toggleContent: '.toggle-content',
		toggleContainer: '.toggle-container',
		accordionContainer: '.accordion',
		tabsContainer: '.tabs-container',
		tabsTitles: '.tabs',
		tabsPane: '.pane',
		playerContainer: '.jp-container',
		playerSource: '.jp-source a',
		player: '.jp-jplayer',
		playerFullscreen: '.jp-screen-option',
		placeholderFields: '.popup-form input',
		userImageUploader: '.user-image-uploader',
		popup: '.popup',
		popupContainer: '.popup-container',
		noPopupClass: 'no-popup',
		googleMap: '.google-map-container'
};

var ajaxForms= {
		loginForm: '.login-form',
		registerForm: '.register-form',
		passwordForm: '.password-form',
		contactForm: '.contact-form',
};

//Ajax Form
function ajaxForm(form) {
	form.submit(function() {
		var data={
			action: form.find('.action').val(),
			nonce: form.find('.nonce').val(),
			data: form.serialize()
		}

		form.find('.message').slideUp(300);
		form.find('.form-loader').show();
		form.find(themeOptions.submitButton).addClass('disabled');
		
		jQuery.post(form.attr('action'), data, function(response) {
			form.find(themeOptions.submitButton).removeClass('disabled');
			if(response.match('success') != null) {
				if(jQuery('a.redirect',response).length) {
					window.location.href=jQuery('a.redirect',response).attr('href');
				} else {
					form.find('.message').html(response).slideDown(300);
					form.find('.form-loader').hide();
				}						
			} else...