JSFiddle - React, Tailwind, and code Playground

by Hemerson Prestes

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="kanan-models-2" id="search-dekstop">
			<ul class="filter">
				<li><a href="#tab1">ALL</a></li>
				<li><a href="#tab2">FEMALE</a></li>
				<li><a href="#male">MALE</a></li>
				<li><img src="https://image.freepik.com/icones-gratuites/sortir-en-plein-ecran_318-9919.jpg" width="20"></li>
				<li style="margin-right:-30px;">
					<div id="toggleText">
						<form style="
    display: inline;
    margin: 0;
    padding: 0;
">
							<input type="text" name="" placeholder="search" style="
    width: 200px;
    height: 30px;
    border-radius: 0;
">
						</form>	
					</div>
				</li>
				<li>
					<a id="displayText"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png" width="20"></a>
				</li>
			</ul>
		</div>

CSS

ul.filter {
display: inline;
list-style: none;
}
ul.filter li {
text-transform: uppercase;
margin-left: 40px;
display: inline;
}
#displayText{position:relative; top:-18px; cursor:pointer; float: right;}
#toggleText {
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
visibility: hidden;
opacity: 0;
}
#toggleText.focused {
visibility: visible;
opacity: 1;
display: inline;
}

JavaScript

$(document).ready(function() {
        $("#displayText").click(function() {
            $("#toggleText").toggleClass("focused");
        });
    });