JSFiddle - React, Tailwind, and code Playground

HTML

<section class="search-bar">
    <form class="search" method="post" action="index.html">
        <input type="search" name="q" placeholder="Search...">
        <ul class="results">
            <li><a href="index.html">Search Result #1<br /><span>Description...</span></a>
            </li>
            <li><a href="index.html">Search Result #2<br /><span>Description...</span></a>
            </li>
            <li><a href="index.html">Search Result #3<br /><span>Description...</span></a>
            </li>
            <li><a href="index.html">Search Result #4</a>
            </li>
        </ul>
        <button></button>
    </form>
</section>

CSS

.search-bar {
    float:right;
    padding-top:25px;
}
.search-bar:before, .search-bar:after {
    content:'';
    display: block;
    height: 1px;
}
/*.search-bar:before {
	top: 192px;
}

.search-bar:after {
	top: 191px;
}*/
 .search-bar form {
    position: relative;
    z-index: 1;
}
.search-bar input {
    color: #888;
    display: block;
    float: left;
    /*font-family: 'Cabin', helvetica, arial, sans-serif;*/
    font-family:'jupiter';
    font-size: 18px;
    font-weight: 400;
    height: 29px;
    margin: 0;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #000;
    width: 169px;
    background:url(../img/searchbox.jpg) no-repeat;
    border:none;
}
.ie .search-bar input {
    line-height: 29px;
}
.search-bar input:focus {
    -webkit-animation: glow 800ms ease-out infinite alternate;
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -ms-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
    box-shadow: 0 0 5px rgba(255, 0, 0, .2), inset 0 0 5px rgba(255, 0, 0, .1), 0 2px 0 #000;
    color:#FF6464;
    outline: none;
}
.search-bar input:focus::-webkit-input-placeholder {
    color:#FF6464;
}
.search-bar input:focus:-moz-placeholder {
    color:#FF6464;
}
.search-bar button {
    /*-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-o-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;*/
    box-shadow: 0 2px 0 #000;
    float: left;
    background:url(../img/searchbtn.png) no-repeat;
    height: 28px;
    position: relative;
    width: 33px;
    border:none;
    top:-1px;
}
.search-bar button:hover, .search-bar button:focus {
    /*background: #292929;
	background: -webkit-linear-gradient(#393939, #292929);	
	background: -moz-linear-gradient(#393939, #292929);	
	background: -o-linear-gradient(#393939, #292929);	
	background: -ms-linear-gradient(#393939, #292929);	
	background:...