JSFiddle - React, Tailwind, and code Playground

by Hell Wolf

HTML

<div>
<form role="search" method="get" action="http://www.peiro.ir">
        <input type="search" placeholder="جستجو">
</form>
</div>

CSS

form{
    float: left;
    height: 28px;
    margin-left: 3px;
}
input[type=search]{
    direction: rtl;
    height: 28px;
    background: #ededed url(images/search.png) no-repeat 6px center;
    border:  solid 1px #22b4d3;
    padding: 9px 2px 10px 25px;
    -moz-padding:9px 2px 10px 25px;
    width: 2px;
    color:transparent;
    cursor: pointer;
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
input[type=search]:hover{
    background-color: #fff;
}
input[type=search]:focus{
    width: 130px;
    background-color: #fff;
    padding-right: 32px;
    color: #000;
    cursor: auto;
    border-color: #6dcff6;
    -webkit-box-shadow:0 0 5px rgba(109, 207, 246, .5);
    -moz-box-shadow:0 0 5px rgba(109, 207, 246, .5);
    box-shadow:0 0 5px rgba(109, 207, 246, .5);
}