JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
  <defs>
    <symbol id="icon-search" viewBox="0 0 19 19">
      <title>Search icon</title>
      <path d="M18.86 17.44l-6.69-6.69a6.69 6.69 0 1 0-1.41 1.41l6.69 6.69zm-12-6a4.7 4.7 0 1 1 3.92-2.16l-1.49 1.43a4.63 4.63 0 0 1-2.48.77z" />
    </symbol>
    <g id="filter">
      <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </g>

  </defs>
</svg>

<a href="#" class="btn btn-border">
  <span>More</span>
  <span class="">
                                    <svg class="filter" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#filter"></use>
                                    </svg>
                                </span>
</a>
<div class="search">
  <div class="search__container">
    <div class="search__icon js-search__icon">
      <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
      </svg>
    </div>
    <form class="search__form js-search__form">
      <input type="text" class="form-control js-search" id="search" placeholder="Search" autocomplete="off">
      <div class="icon icon-close js-icon-close"></div>
      <div class="search__container__result">
        <ul>
          <li><a href="#">I want to get visa</a></li>
          <li><a href="#">I want to see local communities</a></li>
          <li><a href="#">I want to get citizen services</a></li>
        </ul>
      </div>
    </form>
  </div>
</div>
<div class="more-tags">
  <a href="#" class="js-more-tags-icon-close">
    <span class="icon icon-close"></span>
  </a>
  <div class="more-tags-container">
    <div>
      <a href="#" class="btn btn-border">
        <span>Hotels</span>
        <span>
   ...

CSS

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.42857143;
  border-radius: 0.25rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn-border {
  border: 1px solid #ddd;
  border-radius: 5rem;
  padding: 0.5rem 1.25rem;
  color: #777;
  margin-bottom: 0.5rem;
  margin-right: 0.25rem;
  font-size: 0.875rem;
}

a svg {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  fill: #777;
  vertical-align: middle;
}

.more-tags {
  position: fixed;
  bottom: 0;
  left: 10px;
  right: 0;
  width: 250px;
  display: block;
  transform: translateY(200%);
  height: 70%;
  padding: 1.25rem;
  background: #fff;
  box-shadow: 0 0 37px 10px rgba(0, 0, 0, 0.1);
  overflow-y: scroll;
  z-index: 9999;
  /* transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53); */
  transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
}

.is-more-tags-active {
  transform: translateY(0);
}
.search__container svg {
    position: relative;
    width: 19px;
    height: 19px;
    fill: #777;
}
.search__form {
    position: fixed;
    background: #fff;
    /* box-shadow: 0px 30px 20px 6px rgba(0, 0, 0, 0.05); */
    width: 100%;
    left: 0;
    height: 90px;
    top: 0;
    right: 0;
    padding: 1rem;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.search__form.is-search-active {
    display: block;
    visibility: visible;
    opacity: 1;
}

JavaScript

$('a.btn-border').on('click', function(e) {
  $('.more-tags').toggleClass('is-more-tags-active');
  e.preventDefault();
});

var isOpen = false;

$('.js-search__icon').on('click', function(e) {

        $('.js-search__form').toggleClass('is-search-active');
        $('.js-search').focus();
        
        $(document).on('click', checkClick)
        //e.preventDefault();
 });
 
 function checkClick(e){
 	console.log(e);
 }