JSFiddle - React, Tailwind, and code Playground

by Ruben Geert van den Berg

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<form class='hidden'><input type='text' placeholder='Search...'></form>
</body>

CSS

form{
font-size:40px;
position:absolute;
top:5em;
right:-9em;
}

form input{
font-size:inherit;
width:10em;
}

form.hidden input{
cursor:pointer;
}

JavaScript

$(function(){
	
	// CSS TRANSITION EFFECT IN
	$('form.hidden').on('mouseenter',function(){
		$(this).animate(
			{'right':'-8em'},{duration:200,queue:false});
		})
		
	// CSS TRANSITION EFFECT OUT
	$('form.hidden').on('mouseout',function(){
		$(this).animate(
			{'right':'-9em'},{duration:200,queue:false});
		})
	
	//FLY IN ON CLICK, REMOVE TRANSITION EFFECT
	$('form.hidden').on('click',function(){
		$(this)
			.removeClass('hidden')
			.animate({'right':'2em'},1000);
	});
});