JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="search-box d-flex justify-center align-center">
              <input type="text" id="text" placeholder="Type to search ..">
             <a class="p-20 cursor-pointer"><img class="search-btn max-h-20" src="./assets/logo/search.png" alt="search" /></a>
</div>

CSS

.search-box:hover > input{
  display: inline-block;
  border-radius: 30px;
  border: 1px solid whitesmoke;
  padding: 0 0px;  
  padding: 8px;
  outline: none;
  border:1px solid red;
  color: whitesmoke;
  box-shadow: 0 0 5px whitesmoke, 0 0 10px whitesmoke; 
}