JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="search">
            <input type="text" placeholder="search...">
            <div class=btn>
                <i class="fas fa-search"></i>
            </div>
</div>

CSS

.search{
    border-radius: 40px;
    height:40px;
    background-color: orange;
   float:right;
   transform: translate(-280px,5px);

}
.search input{
    position: relative;
    left:20px;
    top:8px;
    padding:5px;
    outline: none;
    width:0px;
    border-radius: 0px 20px 20px 0px;
    border: none;
    background: transparent;
    transition:0.2s;
    

}
.search:hover input{
    width:150px;
}

.btn{
    height:40px;
    width:40px;
    border-radius: 20px;
    background-color: tomato;
    transform: translate(0px, -25px);
}
.btn i{
    position:Relative;
    top:12px;
    left:12px;
}