JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<input type="text" class="search" placeholder="Search...">

CSS

.search {
    background: transparent;
    position:relative;
    border: 1px solid #ccc;
    -webkit-border-radius: 3em;
    -moz-border-radius: 3em;
    border-radius: 3em; 
    width: 125px; 
    padding: 5px 5px 5px 25px;
    font-family: sans-serif;
    font-size: 13px;
    color: #727272;
    x-webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
    x-moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
    xbox-shadow: 0 0 0.5em rgba(0,0,0,0.25);
}
.search:focus {
    outline: none;
    border: 1px solid #5ec8ff;
    -webkit-box-shadow: 0 0 0.75em #b1e4ff;
    -moz-box-shadow: 0 0 0.75em #b1e4ff;
    box-shadow: 0 0 0.75em #b1e4ff;
}
.search::-webkit-input-placeholder {
    color: #ccc;     
}
.search:-moz-placeholder {
    color: #ccc;
}
.search:before {
    content: " ";
    width: 10px;
    height: 10px;
    display: block;
    background: red;
    border: 3px solid red;
    position: absolute;
    -webkit-border-radius: 3em;
    -moz-border-radius: 3em;
    border-radius: 3em;
}

.search:after {
    content: '';
    position:absolute;
    top:50%;
    left:10px;
    width:3px;
    height:7px;
    margin-top:0;
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}