JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
   

<div id="fixed"> 
       <div id="search-wrap" class="wrap-top search-wrap">
          <div class="width">
              <ul class="clearfix">
                    <li ><i class="fa fa-search"></i> <input type='search' placeholder="Search..."></li>
                    <li id="li-3">Search</li>
                    <li id="li-4"> <i class="fa fa-times"></i> </li>
                </ul>
          </div>
       </div> 
       
        <div id="tags-wrap" class="wrap-top tags-wrap">
          <div class="width">
              <ul class="clearfix">
                   <li>tag#1</li>
                   <li>tag#2</li> 
                   <li>tag#3</li> 
                   <li>tag#4</li> 
                   <li>tag#5</li>
                   <li>tag#6</li>
                   <li>tag#7</li>
                   <li>tag#8</li>
                   <li>tag#9</li>
                   <li>tag#10</li>  
              </ul>
              <div id="search-results"></div>
          </div>
       </div> 
        
       <div id="nav-wrap" class="wrap-top nav-wrap">
           <div class="width">
                <ul class="clearfix">
                    <li>Link#1<span>Sub-link#1</span></li>
                    <li>Link#2<span>Sub-link#2</span></li>
                    <li>Link#3<span>Sub-link#3</span></li>
                    <li>Link#4<span>Sub-link#4</span></li>
                    <li>Link#5<span>Sub-link#5</span></li>
                    <li>Link#6<span>Sub-link#6</span></li>
                    <li id="search-btn" class="s-desk"> <i class="fa fa-search"></i> </li>
                </ul>
                
                <i class="fa fa-reorder fa-2x menu-mob" id="menu-mob"></i>
                
            </div>
        </div>
    </div>
    
  	
    <div id="content-wrap">    
       ...

CSS

/*CLEARFIX*/
.clearfix:after {content: ".";	display: block;	clear: both; visibility: hidden; line-height: 0; height: 0;} 
.clearfix {	display: inline-block;} 
html[xmlns] .clearfix {display: block;} 
* html .clearfix {height: 1%;}

/*CSS RESET*/
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,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;}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,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;}

/*GLOBALS*/
a{text-decoration:none;	}
body, hmtl{background: #2c3e50; font-family: 'Anton', sans-serif;}


/*WRAPPERS*/
#fixed{
	position:fixed;
	z-index:1000;
	width:100%;	
	top:0;
}
.wrap-top{
	height:70px;
	width:100%;	
	line-height:70px;
}

.wrap-top ul{
	position:relative; 
	width:100%;
	height:100%;
}

.wrap-top ul li{
	float:left;
	list-style:none;
	text-align:center;
	text-transform:uppercase;
	font-size:21px;	
	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	
	height:100%;
}
.width{
	max-width:800px;
	width:100%;
	margin: 0 auto;
	height:100%;
}





/*SEARCH*/
#search-wrap{background:#253444;}

.search-wrap{margin-top:-70px;}
.search-wrap.active{margin-top:0;}

#search-wrap ul li{
	width:75%;
	color:#3b5167;
	height:70px;		
	border-right: 1px solid #3b5167 ;
}

#search-wrap ul li:first-child{
	border-left: 1px solid #3b5167 ;...

JavaScript

$(document).ready(function(){

	/******************************
	 ADD ANIMATION TO THE TEXT 
	******************************/
	animation()	
	
	
	/*********************
	 SET ROW'S COLOR
	*********************/
	$.each($('.row'), function() { 
	   var c = $(this).attr("data-color");
	   $(this).css("background",c);
	});
	
	
	
	
	/******************
	 SEARCH BOX
	******************/
	var input = $('#search-wrap input');
	var sw = $('#search-wrap');
	var tw = $('.tags-wrap');
	var sr = $('#search-results');
	
	//show the search box
	$('#search-btn').click(function(){
		sw.addClass('active');
		input.focus();
	});	
	
	//close the search box
	$('#content-wrap, #li-4').click(function(){
		//collapse bars
		fcollapse(sw,tw)
		
		//reset search
		input.val("");
		nsearch(sr)	
		
	});
	
	//key up function
	input.keyup(function(e){
		tw.addClass('active');
		
		//if input is 'EMPTY'
		if($(this).val().length == 0){
			tw.removeClass('active');			
			nsearch(sr)	
		}
		
		//if we press 'ENTER'
		if (e.keyCode == 13) {
		    fsearch(input, sr, tw)
	    }
		
		//if we press 'BACKSPACE'
		if (e.keyCode == 8) {
		   nsearch(sr)
	    }
	});
	
	
	
	/*TAGS CLICK*/
	$('.tags-wrap ul li').click(function(){
		var txt = $(this).text();
		input.val(txt);
		input.focus();		
	});
	
	
	/*SEARCH CLICK*/
	$('#li-3').click(function(){
		fsearch(input, sr, tw)
	});
	
	
	
	
	
	
	
	/*************************
	 ON WINDOW SCROLL FUNCTION
	*************************/
	var count = 0;
	$(window).scroll(function(event){		

		var scrolled = $(this).scrollTop();		
		
	    if (scrolled > count){  
			//scroll down
			count++;
			$('#nav-wrap').addClass('active');		
		} 
		else { 			
			//scroll up
			count--; 
			$('#nav-wrap').removeClass('active');
		}
	    
		//Check if we've reached the top
		count = scrolled;		
		
		if(count == 0){
			animation()
			$('#first-row i').removeClass('active');
		}else{
			$('h1 ,h2').removeClass('animationActive');
			$('#first-row...