<div class="container">
        <h1 class="title">Search Widget</h1>
        <div class="search-contain">
            <span id="search-animation"></span>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/search.svg"
            id="search-icon" alt="search button"> 
            <input type="text" id="search">      
        </div>
    </div>

body{
    background-color: rgb(28, 39, 54);
    font-family: sans-serif;
}
h1 {
    color: white;
    font-size: 3.5em;
}
#tip {
    color: rgb(248, 39, 39);
    text-transform: uppercase;
    font-size: 12px;
    margin-left: 50%;
    text-align: end;
    visibility: hidden;
    position: absolute;
    opacity: 0;
    transition: opacity 2s;
}
.container {
    text-align: center;
}
#search{
    background: rgb(248, 39, 39);
    width: 20px;
    height: 20px;
    padding: 20px;
    border-radius: 30px;
    border: none;
    color: white;
    cursor: pointer;
    transition: width 1s ease;
    font-size: 1.6em;

    &::placeholder{
        color:rgb(131, 185, 202);
    }
    &:focus {
        outline: none;
    }
}
#search-icon {
    width: 22px;
    height: 22px;
    margin: 19px 0 0 18px;
    position: absolute;
    z-index: 1;
    cursor: pointer;
}
#search-animation{
    height: 18px;
    width:18px;
    padding:18px;
    border: 3px solid rgb(248, 39, 39);
    border-radius: 50%;
    position: absolute;
    opacity: 0.5;
    animation: grow 1s infinite;
}

@keyframes grow {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.3);
        opacity: 0;
    }
}

const searchBtn = document.getElementById('search-icon');
const search = document.getElementById('search');
const searchAnimation = document.getElementById('search-animation');
const tip = document.getElementById('tip');

searchBtn.addEventListener('click', ()=>{
    search.style.animation = 'none';
    search.style.width = '50%';
    search.style.paddingLeft = '50px';
    search.style.cursor = 'text';
    search.focus();
    searchAnimation.style.animation = 'none';
    searchAnimation.style.zIndex = "-1";
});
 search.addEventListener('blur',()=>{
    search.style.width = '20px';
    search.style.paddingLeft = '20px';
    search.style.cursor = 'pointer';
    search.value = ""; 
    searchAnimation.style.animation = 'grow 1s infinite 2s';
 });