JSFiddle - React, Tailwind, and code Playground

HTML

<div id='header' class='cf'>
<div id='title'>	
	<!--  class='fullscreen'-->
<form class='hidden'><div id='close-search' title='Close Search Form'></div><input type='text' placeholder='Search...'></form>
	<h1>
		<a href='#'>
			<img src='https://dl.dropboxusercontent.com/u/39492899/img-100-100.png' alt='' title='Home'/>
			Main Title Here
		</a>
		<span>Put a Sub Title Here</span>
	</h1>
</div><!--id='title'-->
	 <ul>
		<li><a href='#'>Category</a></li>
		<li><a href='#'>Category</a></li>
		<li><a href='#'>Category</a></li>
		<li><a href='#'>Category</a></li>
		<li><a href='#'>Category</a></li>
<!-- 		<li><a href='#'>All </a></li>
		<li><a href='#'>How To ...</a></li>
		<li><a href='#'>Python</a></li>
		<li><a href='#'>Tools</a></li>
		<li><a href='#'>Glossary</a></li>
		<li><a href='#'>All </a></li> -->
	</ul> <!---->
</div><!-- id='header' class='cf'-->

CSS

/*drunk, fix later*/
/*0a93cd = 10,147,205*/


/* RESET BROWSER DEFAULTS */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small,strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside,canvas, details, embed, figure, figcaption, footer, div#header, hgroup, menu, nav, output, ruby, section,summary,time, mark, audio, video
{margin: 0;	padding: 0;	border: 0;	font-size: 100%;font: inherit;	vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, div#header, hgroup,menu, nav, section 
{display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}
table{border-collapse: collapse;border-spacing: 0;}
* {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;}

.cf:after{
content:'';
display:table;
clear:both;
}

strong{
font-weight:bold;
}

/* --------------------GENERAL STYLES FOR MAX VIEWPORT WIDTH (=2000PX)-------------------- */

html{
font-size:22px;
transition:font-size .3s;
}

body{
position:relative;
min-width:600px;
}

a{
color:#0a93cd;
}

a:hover{
color:#000;
}

/* --------------------GENERAL DIV#HEADER STYLES-------------------- */

div#header{
background:#bbeeff url(img/bg_header_sky_1500_450.jpg);
background-size:cover;
position:relative;
font-family:arial;
color:#00006d;
border-bottom:.1em solid #00006d;
}

div#header a{
color:#0a93cd;
}

div#header a:hover{
color:#00006d;
}

/* --------------------DIV#HEADER CHILDREN-------------------- */

div#title{
position:relative;
overflow:hidden;
}

div#header form{
height:2.4545em;/*OBSERVED HEIGHT / 22px = 2.454545em. Setting it is necessary for vertically...

JavaScript

$(function(){

	// 1. FADE IN SEARCH FORM ON ODD CLICK
	$('body').click(function(e){
       	$this = $(e.target);
       
		if($this.is('form.hidden input') && $(window).width() <= 900){
			// alert('hi');
			$this
				.css('color','#0a93cd')
				.animate(
					{'right':'1em'},{duration:1000,queue:false})
				.parent()
				.css('background','rgba(127,127,127,.4)')
				.addClass('shown')
				.removeClass('hidden');
				// .animate(
					// {'background-color':'rgba(127,127,127,.4)'},{duration:1000,queue:false});
		}
	});
	
	// 2. FADE OUT SEARCH FORM ON EVEN CLICK
	$('body').click(function(e){
        
		$this = $(e.target);        
		if($this.is('form.shown #close-search')){
           //Need to stop anim before reset it again.
            $this.next().stop();
           	$this
				.next() /*input*/
                .animate(
                    {'right':'-9.5em'},{duration:1000,queue:true , start :
                     function(){ $this.parent().removeClass('shown'); } })
				.queue(
					function(){                           
                          $this.next().removeAttr('style');                        
					} )
                 .end()
                 .delay(1000)
				.parent()
				.css('background','none')
				.addClass('hidden');			
            
		}
	});
});	// END JQUERY