JSFiddle - React, Tailwind, and code Playground

by Ganesh Yadav

HTML

<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<div class="form_container clearfix">
						<div class="form_main clearfix">
							<form id="nl-form" class="nl-form">
								<div class="formcb pos-r">
									<div class="formcbInner formcbInner-scroll">
										Lorem Ipsum is simply 
										<select name="movies" id="movies">
											<option value="">____</option>
											<option value="500">2</option>
											<option value="500">3</option>
											<option value="250">4</option>
										</select>
										dummy text of the printing
										<select name="restaurants" id="restaurants">
											<option value="">____</option>
											<option value="1000">2</option>
											<option value="500">3</option>
											<option value="500">4</option>
										</select>
										 and typesetting industry.
										<select name="refuelled" id="refuelled">
											<option value="">____</option> 
											<option value="1">car</option>
											<option value="2">bike</option>
										</select>
										Lorem Ipsum has been the industry's standard dummy 
										<select name="fuelPrice" id="fuelPrice">
											<option value="">____</option>
											<option value="1">1500</option>
											<option value="2">2000</option>
											<option value="3">3000</option>
										</select>text ever since the 1500s,
										<select name="groceries" id="groceries">
											<option value="">____</option>
											<option value="1500">2</option>
											<option value="1000">3</option>
											<option value="750">4</option>
										</select>
										 when an unknown printer took a galley
										<select name="clothes" id="clothes">
											<option value="">____</option>
											<option value="1">1000</option>
											<option value="2">1500</option>
											<option value="3">2000</option>
										</select> of type and scrambled it to make...

CSS

body{
  font-size:20px;
  color:#000;
}
/*** form ***/
.form_container{
	float:left;
	width:100%;
	color:#000;
	position:relative;
}

.nl-dd ul li.nl-dd-checked:before, .nl-field-go:before{
	display:none;
}
.goforSwitch{
	float:right;
	border:2px solid #023770;
	width:210px;
	height:210px;
	outline:0;
	line-height:120%;
	margin-right: 3.5%;
    margin-top: 6%;
	display:table;
	text-align:center;
}
.goforSwitch span{
	color:#f3e803;
}
.switchFormBtn{
	background:none;
	border:none;
}
.light{
	position:relative;
	float:right;
	width: 191px;
	height: 165px;
	margin: 240px 10px 0;
	
}
.light:before {
	content: '';
	position: absolute;
	top:0;
	left:0;
	width: 191px;
	height: 165px;
border:2px solid blue;
border-radius:100%;
	-ms-transition: all 0.5s; 
	-o-transition: all 0.5s; 
	-moz-transition: all 0.5s; 
	-webkit-transition: all 0.5s; 
	transition: all 0.5s; 
}
.light:after{
	content: '';
    position: absolute;
    right: -36px;
    top: 12px;
    width: 60px;
    height: 2px;
	background: #023770;
}

.light_stand{
	background:#023770;
	width:20px;
	height:90px;
	line-height:100px;
	margin:50px auto;
	position:relative;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-o-transition: 		all 7s ease-in-out; 
	-ms-transition: 	all 7s ease-in-out; 
	-moz-transition: 	all 7s ease-in-out; 
	-webkit-transition: all 7s ease-in-out; 
	transition: 		all 7s ease-in-out; 
}
.light_stand:before{
	content:'';
	position:absolute;
	top: -15px;
	left: -5px;
	width: 30px;
	height: 30px;
	background:#023770;
	-ms-transition:		background 2s ease;
	-o-transition: 		background 2s ease;
	-webkit-transition: background 2s ease;
	-moz-transition: 	background 2s ease;
	transition: 		background 2s ease;
}
.light_standActive .light_stand:before{
	background:#f3e803;
}
.light_standActive:before{
	-o-transform: 		rotate(180deg);
	-ms-transform: 		rotate(180deg);
	-moz-transform: 	rotate(180deg);
	-webkit-transform: 	rotate(180deg);
	transform:...

JavaScript

/*==== jquery validate ====*/
	$.validator.setDefaults({
		onfocusout: true,	
		errorPlacement: function(error, element) {},
		highlight: function(element){
			$(element).addClass("errorHighlight-rrrr");
			$(element).prev('.nl-field').addClass("errorHighlight");
        },
        unhighlight: function(element){
			$(element).removeClass("errorHighlight-rrrr");
			$(element).prev('.nl-field').removeClass("errorHighlight");
        },
		submitHandler: function() {
			$('.light').addClass('light_standActive');
		},
		ignore: [] 
	});	
	$("#nl-form").validate({
		rules: { 
			movies: "required",
			restaurants: "required",
			refuelled: "required",
			fuelPrice: "required",
			groceries: "required",
			clothes: "required",
			equipment: "required",
			equipmentPrice: "required",
			travel: "required"
		},
		messages: {

		}
	});
	/*====#jquery validate ====*/


  
/*=== nlform ====*/
/**
 * nlform.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
;( function( window ) {
	
	'use strict';

	var document = window.document;

	if (!String.prototype.trim) {
		String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
	}

	function NLForm( el ) {	
		this.el = el;
		this.overlay = this.el.querySelector( '.nl-overlay' );
		this.fields = [];
		this.fldOpen = -1;
		this._init();
	}

	NLForm.prototype = {
		_init : function() {
			var self = this;
			Array.prototype.slice.call( this.el.querySelectorAll( 'select' ) ).forEach( function( el, i ) {
				self.fldOpen++;
				self.fields.push( new NLField( self, el, 'dropdown', self.fldOpen ) );
			} );
			Array.prototype.slice.call( this.el.querySelectorAll( 'input' ) ).forEach( function( el, i ) {
				self.fldOpen++;
				self.fields.push( new NLField( self, el, 'input', self.fldOpen ) );
			} );
			this.overlay.addEventListener( 'click', function(ev) { self._closeFlds(); }...