JSFiddle - React, Tailwind, and code Playground

Search bar Ubigreen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl" style="background-color:rgb(238,238,238);width:600px;height:600px">
  <input class="SearchBar_1_" style="display:none"/>

  <br/>

  <div class="update" style="display:none">
    <div class="left-inner-addon update2">
      <i class="fa fa-search"></i>
      <input type="text" class="form-control padded" placeholder="Rechercher.." />
    </div>
  </div>
  
  <br/>


    <div class="test">
      <i class="fa fa-search"></i>
      <input placeholder="Rechercher........" class="testinput"/>
    </div>

<br/>

CSS

.SearchBar_1_ {
  background: #FFFFFF;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.33);
  filter: progid: DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color='#000000');
  margin: 10px 10px 10px 20px;
  width: 300px;
  margin-left:50px;
}

.left-inner-addon {
  position: relative;
}

.left-inner-addon input {
  padding-left: 30px;
}

.left-inner-addon i {
  position: absolute;
  padding: 10px 12px;
  pointer-events: none;
}

.padded {
  padding-left: 30px;
}

.container {
  display: table;
  width: 300px;
  height: 400px;
}

.update {
  width:400px;
  height:60px;
  vertical-align: middle;
  margin-left:50px;
}

.update2{
  width:400px;
  height:60px;
  display:table-cell;
}

/* Third */
.test {
  width: 400px;
  height: 60px;
  //border: solid 2px black;
-moz-box-shadow: 0px 2px 3px 1px #c0c0c0;
-webkit-box-shadow: 0px 2px 3px 1px #c0c0c0;
-o-box-shadow: 0px 2px 3px 1px #c0c0c0;
box-shadow: 0px 2px 3px 1px #c0c0c0;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=180, Strength=3);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
  margin-left:50px;
  vertical-align: middle;
  padding-left: 20px;
  background-color:white;
}
.testinput {
  border:none;
  height:100%;
  padding-left:20px;
  width:90%;
  outline: none;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.name = "Angular";
}]);