JSFiddle - React, Tailwind, and code Playground

by Evert Ramos

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="search-box"> 

    <input value="Search" type="text" class="form-control" />
    <i class="glyphicon glyphicon-search"></i>
</div>

CSS

body {
    margin: 20px;
    background: #455a64;
}
.search-box {
    position: relative;
}
.search-box .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
    left: 15px;
    top: 0px;
}
.search-box .glyphicon:before {
    color: white;
    transition: all 0.2s linear;
}
.search-box input {
    color: #fff;
    padding-left: 60px;
    background: #546e7a;
    border:0;
    outline: none !important;
    transition: all 0.2s linear;
}
.search-box input:focus {
    background: #fff !important;
    outline: 0;
    color: #333;
}
.search-box input:focus + .glyphicon:before {
    color: #333;
}
.search-box input:hover {
    background: #78909c;
}