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

@charset "utf-8";

/*
Theme Name: Academy
Theme URI: http://themextemplates.com/demo/academy
License: GNU General Public License and Themeforest License
License URI: http://themeforest.net/licenses/regular_extended
Description: Learning Management WordPress Theme.
Author: Themex
Author URI: http://www.themeforest.net/user/themex/
Version: 1.6
Tags: learning, teaching, education, studying, tutoring
*/

/*--------------------CSS Structure-------------------

1. RESET/GLOBAL
		Global Styles
		Form Elements
		Misc Styles
		
2. CUSTOM ELEMENTS
		Buttons
		Forms
		Images
		Lists
		Player
		Substrate
		Tabs
		Toggles
		Tooltips
		Google Map
		
3. LAYOUT
		Columns
		Header
			- Dropdown Menu
			- Select Menu
			- Search Form
			- Login Form
			- Share Tooltip
			- Social Links
		Content
		Footer
		
4. PAGES
		Course
			- Preview
			- Listing
			- Plan
			- Certificate
		Lesson
			- Listing
			- Questions
			- Quizzes
		Blog
			- Post
			- Comments
			- Pagination
		Users
			- Profile
			- Experts
			- Testimonials
		
5. SLIDERS
		Parallax Slider
		Boxed Slider
		
5. WIDGETS
6. WOOCOMMERCE
7. RESPONSIVE STYLES
8. CSS3 EFFECTS
9. IE FIXES

------------------------------------------------*/

/* ============================== RESET/NORMALIZE =========================== */

body {
	position:relative;
    background:#fff;
    color:#444;
	letter-spacing:0;
    font-weight:normal;
    font-style:normal;
    font-size:13px;
    font-family:Open Sans, Helvetica, Arial, sans-serif;
    line-height:1.5;
}

html,
body {
	height:100%;
}

a img {
    border:none;
}

a {
	outline:none;
    color:#5ea5d7;
    text-decoration:none;
    line-height:inherit;
}

a:focus,
a:hover {
    color:#5ea5d7;
}

::-moz-selection {  background-color: #f3715d; color: #fff; }
::selection      {  background-color: #f3715d; color: #fff; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color:#444;
}

figure {
    margin:0;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th,...

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...