JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id='top_line'></div>
      <div id="container">
		 <div id="sign-in"><img style="vertical-align:bottom"alt="Github" src="https://s3.amazonaws.com/freit5misc/github.png" />
			<a class="sign-in" href="/auth/github"><span class="sign-in">Sign in</span></a></div>	
       <div id="header">
	    <span id="tag">use</span>
	     <span id="logo"><a href="/" id="logo">Jog</a></span>
	        <span id="tag2">to quickly save & recall code</span></div>

			<div class="demo">	
				
	         <input class="typeahead" type ="text" placeholder="Search here...">
			
		       </div>
		      
           <div id="widgets">
		     <div id="wrap">
			   <h1 class="name" >Models</h1>
			     <li><a href="">Rename a column</a></li>
			<li><a href="">git add all new or modified files</a></li>
			<li><a href="">Heroku assets:precompile plugin </a></li>
		<li><a href="">Heroku tail logs</a></li>
		<li><a href="">Rename a column</a></li>
	<li><a href="">Heroku load db:schema </a></li>
	<li><a href="">Heroku: connect to database </a></li>
<li><a href="">Postgres: show tables</a></li>
<li><a href="">git switch to a branch </a></li>
<li><a href="">add records from console </a></li>
		     </div>
	
		     <div id="wrap">
		       <h1 class="name" >Models</h1>
			     <p>test model</p>
		     </div>
		
			<div id="wrap">
		       <h1 class="name" >Models</h1>
			     <p>test model</p>
		     </div>
			<div id="wrap">
			   <h1 class="name" >Models</h1>
			     <p>test model</p>
		     </div>

		     <div id="wrap">
		       <h1 class="name" >Models</h1>
			     <p>test model</p>
		     </div>

			<div id="wrap">
		       <h1 class="name" >Models</h1>
			     <p>test model</p>
		     </div>
			<div id="wrap">
			   <h1 class="name" >Models</h1>
			     <p>test model</p>
		     </div>

		     <div id="wrap">
		       <h1 class="name" >Models</h1>
			     <p>test model</p>
		     </div>

			<div id="wrap">
		       <h1 class="name" >Models</h1>
			     <p>test model</p>
		    ...

CSS

/*!
 * typeahead.js 0.8.2
 * https://github.com/twitter/typeahead
 * Copyright 2013 Twitter, Inc. and other contributors; Licensed MIT
 */

.twitter-typeahead {
  position: relative !important;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.tt-query {
  position: relative !important;
  /* for unknown reasons, this fixes alignment issues in ie7 */

  *margin-top: -1px !important;
  vertical-align: top !important;
  background-color: transparent !important;
  /* ie6-8 doesn't fire hover and click events for transparent elements
     for a workaround, use a 1x1 transparent gif */

  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) !important;
}
.tt-hint {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border-color: transparent !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
.tt-dropdown-menu,
.tt-suggestions,
.tt-suggestion {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  /* TODO: need default z-index, should be configurable */

  display: none;
}
.tt-dropdown-menu.tt-is-open {
  display: block;
}
.tt-dropdown-menu.tt-is-empty {
  display: none;
}
.tt-suggestion {
  display: block;
  white-space: nowrap;
  cursor: pointer;
}
.tt-suggestion * {
  white-space: normal;
}
/* rtl support */
/* ----------- */
.twitter-typeahead.tt-rtl {
  direction: rtl;
}
.twitter-typeahead.tt-rtl .tt-dropdown-menu {
  left: auto;
  right: 0;
}


body {
	background: #f6f8f8;
}

#top_line {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: #e70800;
  z-index: 2;
}

#container
{
	max-width: 1160px;
	margin: 0px auto;
}

#sign-in{
	margin: 20px 0 0 1040px;
	text-decoration: none;
}

#header {
	margin: 10px 0px 10px 0px;
	text-align: center;
}

#tag {
	margin: 0 0 20px 0;
	text-align: center;
	font-family:...

JavaScript

/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/(function(e,t){var n,r,i=typeof t,o=e.document,a=e.location,s=e.jQuery,u=e.$,l={},c=[],p="1.9.1",f=c.concat,d=c.push,h=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,b=function(e,t){return new b.fn.init(e,t,r)},x=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,w=/\S+/g,T=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,N=/^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,k=/^[\],:{}\s]*$/,E=/(?:^|:|,)(?:\s*\[)+/g,S=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,A=/"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,j=/^-ms-/,D=/-([\da-z])/gi,L=function(e,t){return t.toUpperCase()},H=function(e){(o.addEventListener||"load"===e.type||"complete"===o.readyState)&&(q(),b.ready())},q=function(){o.addEventListener?(o.removeEventListener("DOMContentLoaded",H,!1),e.removeEventListener("load",H,!1)):(o.detachEvent("onreadystatechange",H),e.detachEvent("onload",H))};b.fn=b.prototype={jquery:p,constructor:b,init:function(e,n,r){var i,a;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof b?n[0]:n,b.merge(this,b.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:o,!0)),C.test(i[1])&&b.isPlainObject(n))for(i in n)b.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(a=o.getElementById(i[2]),a&&a.parentNode){if(a.id!==i[2])return r.find(e);this.length=1,this[0]=a}return this.context=o,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):b.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),b.makeArray(e,this))},selector:"",length:0,size:function(){return this.length},toArray:function(){return h.call(this)},get:function(e){return...