JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<form class="search-form" action="/search" method="get">
    <div class="teks-search">
        <input type="text" name="q" placeholder="Cari disini...">
        <a title="Cari disini" class="bd" href="/"></a>
    </div>
</form>

CSS

.teks-search {
  border:1px solid #B9E8FB;
  width:26px;
  height:26px;
  background-color:white;
  overflow:hidden;
  position:relative;
}

.teks-search input,
.teks-search input:focus {
  border:none;
  background:none;
  margin:0 0;
  padding:0 16px;
  display:block;
  width:200px;
  height:26px;
  font:italic bold 12px/26px Arial,Sans-Serif;
  color:#777;
  outline:none;
}

.teks-search.focus {
  background-color:#fff;
  border-color:#ccc;
}

.teks-search .bd {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:#222 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%;
}

JavaScript

$(function() {
    $('.search-form .bd').on("click", function() {
        $(this).hide()
            .parent().addClass('focus')
                .stop().animate({width:200}, 120, "swing")
                    .find('input').trigger("focus")
                        .on("focusout", function() {
            $(this).next().show()
                .parent().removeClass('focus')
                    .stop().animate({width:26}, 120, "swing");
        });
        return false;
    });
});