JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bottom">
    <div class="slide">
      <a class="slide">x</a><br>
      slide
    </div>
    <a class="slide">Нажать</a>
  </div>

CSS

html,body
{
  margin:0px;
  padding:0px;
  height:100%;
}
.bottom
{
  position:fixed;
  width:200px;

  margin:0px 50%;
  left:-100px;
  bottom:0px;
}
.bottom>a.slide
{
  display:inline-block;
  width:100%;
  text-align:center;
  background:#bbb;
  position:relative;
  z-index:1;
}
.bottom>div.slide
{
  height:50px;
  position:relative;
  z-index:0;
  background:#ddd;
}
.bottom>div.slide>a.slide
{
  display:inline-block;
  position:absolute;
  z-index:1;
  top:0px;
  left:0px;
  right:0px;
  padding:0px 5px;
  text-align:right;
  background:#bbb;
}

JavaScript

$(document).ready(function()
{
  var slide = 1;
  $('body').click(function()
  {
    var obj = $('.bottom>div.slide');
    var top = parseInt($(obj).css('top'),10);
    if(top === 0 && slide === 0)
    {
        slide_down(obj);
    }
    slide = 0;
  });
  $('.bottom').click(function()
  {
    slide = 1;
  });
  $('.bottom a.slide').click(function()
  {
    var obj = $('.bottom>div.slide');
    var top = parseInt($(obj).css('top'),10);
    if(isNaN(top))
    {
      $(obj).css({'top':$(obj).height()+'px'});
      slide = 0;
    }
    else
    {
      if(top === $(obj).height())
      {
        slide_up(obj);
      }
      else if(top === 0)
      {
        slide_down(obj);
      }
    }
  });
  $('.bottom>a.slide').click();
    
  function slide_up(obj)
  {
    $(obj).animate({'top': '0px'},600);
  }
  function slide_down(obj)
  {
    $(obj).animate({'top':$(obj).height()+'px'},600);
  }
});