JSFiddle - React, Tailwind, and code Playground

by charaf11

HTML

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
      <input type="text" class="search_form" placeholder="Search" />
  </div>
    <button type="submit" class="btn btn-default" > 'Find'</button>
</form>

CSS

input[type=text].search_form
{
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	width:200px;
	min-height: 28px;
	padding: 4px 20px 4px 8px;
	font-size: 12px;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
}

input[type=text]:focus.search_form
{
	width: 400px;
	border-color: #51a7e8;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
	outline: none;
}