JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<form class="search-box pull-right" action="#" method="post">	<span class="icon-magnifier search-icon"><img src="https://cdn0.iconfinder.com/data/icons/30_Free_Black_ToolBar_Icons/40/Black_Search.png" alt="Search" /></span>

    <input type="text" name="search-bar" class="search-bar" />
</form>

CSS

.search-box {
    position: relative;
    margin-left: 400px;
}
.search-icon {
    font-size: 1.875em;
    color: #1CB6B5;
    position: absolute;
    right: 0px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.search-icon-open {
    z-index: 1000;
    color: #FFF;
    right: 400px;
}
.search-bar {
    background: #1cb6b5;
    border: 0 none;
    border-radius: 20px;
    width: 400px;
    height: 40px;
    color: #FFF;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 0px;
    padding: 0;
    position: absolute;
    right: 0;
}
.search-bar-open {
    display: block;
    width: 400px;
    padding-left: 40px;
    padding-right: 10px;
    top: 0;
}

JavaScript

$('.search-box .icon-magnifier').on('click', function (e) {
           $('.search-bar').toggleClass("search-bar-open");
           $('.search-icon').toggleClass("search-icon-open");
           e.preventDefault();
       });