JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

		<form action="javascript:void(0);" method="get">
			
			<fieldset>
				
				<ul class="toolbar clearfix">
					<li><input type="search" id="search" placeholder="O que você está buscando?"></li>
					<li><button type="submit" id="btn-search"><i class="fab fa-adobe"></i></button></li>

				</ul>

			</fieldset>

		</form>

	</div> <!-- end container -->

CSS

@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

a[class*="fontawesome-"]:before,
span[class*="fontawesome-"]:before {
	display: block;
	font-family: 'FontAwesome', sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ---------- GENERAL ---------- */

body {
	background: #ccc;
	font: 87.5%/1.5em 'Open Sans', sans-serif;
	margin: 0;
}

a {
	text-decoration: none;
}

button {
    -webkit-appearance: button;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-transform: none;
}

button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

input {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	line-height: inherit;
	margin: 0;
	padding: 0;
}

input:focus {
	outline: none;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- CLASSES ---------- */

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
	content: "";
	display: table;	
}
.clearfix:after { clear: both; }

.container {
	left: 50%;
	margin: -17px 0 0 -186px;
	position: absolute;
	top: 50%;
	width: 372px;
}

/* ---------- TOOLBAR ---------- */

.toolbar {
	color: #fff;
}

.toolbar li {
	float: right;
}

.toolbar li:first-child a { border-radius: .5em 0 0 .5em; }
.toolbar li:last-child button { 
    border-radius: 0.5em 0 0 0.5em;
}

.toolbar a,
.toolbar input[type="search"],
.toolbar button {
	background: #3598db;
	color: #fff;
	display: block;
	padding: .5em 1em;
	position: relative;
}

.toolbar a:hover,
.toolbar...

JavaScript

<script>
( function() {
	$('#btn-search').on('click', function(e) {
		e.preventDefault();
		$('#search').animate({width: 'toggle'}).focus(); 

	});
} () );
</script>