JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-xs-8 col-md-6">
  <form class="form-horizontal rechercheProduit">
    
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">      
      <span class="input-group-addon">
        <span aria-hidden="true" class="glyphicon glyphicon-search"></span>
        <span class="hidden-xs text-upper-style">Rechercher</span>
      </span>      
    </div>
    
  </form>
</div>

CSS

* {
  border-radius: 0 !important;
}
.rechercheProduit .input-group-addon {
  border: 0px;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit:hover {
  color: #fbba00;
}
.rechercheProduit .form-control,
.rechercheProduit .input-group-addon {
  border: solid 2px #004392;
}
.rechercheProduit .input-group-addon {
  -moz-border-radius: 0;
  -webkit-border-w: 0;
  border-radius: 0;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit .input-group-addon:hover {
  color: #fbba00;
}

.text-upper-style {
  text-transform: uppercase;
}

.rechercheProduit .input-group-addon span.glyphicon{
  background: url(http://i.stack.imgur.com/vr0uy.png);
  height: 24px;
  width: 38px;
  background-size: 100% 100%;
  vertical-align: text-bottom;
  margin: 0 -13px 0 0;
  top: auto;
  bottom: -5px;
  margin-top: -6px;
  z-index: 0;
}

.rechercheProduit .input-group-addon span.glyphicon:before{
  content:'';
}