JSFiddle - React, Tailwind, and code Playground
by Alhasan Abd
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mapping API</title>
<meta name="author" content="AlhasanIQ"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Loading Google Map API engine v3 -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Map Script -->
<script>//<![CDATA[
$(document).ready(function(){var current_fs,next_fs,previous_fs;var left,opacity,scale;var animating;$(".next").click(function(){if(animating)return false;animating=true;current_fs=$(this).parent();next_fs=$(this).parent().next();$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");next_fs.show();current_fs.animate({opacity:0},{step:function(now,mx){scale=1-(1-now)*0.2;left=(now*50)+"%";opacity=1-now;current_fs.css({'transform':'scale('+scale+')'});next_fs.css({'left':left,'opacity':opacity});},duration:800,complete:function(){current_fs.hide();animating=false;},easing:'easeInOutBack'});});$(".previous").click(function(){if(animating)return false;animating=true;current_fs=$(this).parent();previous_fs=$(this).parent().prev();$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");previous_fs.show();current_fs.animate({opacity:0},{step:function(now,mx){scale=0.8+(1-now)*0.2;left=((1-now)*50)+"%";opacity=1-now;current_fs.css({'left':left});previous_fs.css({'transform':'scale('+scale+')','opacity':opacity});},duration:800,complete:function(){current_fs.hide();animating=false;},easing:'easeInOutBack'});});$(".submit").click(function(){return false;})});
//]]></script>
<style type="text/css">
*{margin:0;padding:0}
html, body {
overflow:hidden;
height: 100%;
}
body{
...