JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div class="drawer">
    <div class="drawer-navbar">
      <ul>
        <li class="btn-1">1</li>
        <li class="btn-2">2</li>
        <li class="btn-3">3</li>
      </ul>
    </div>
    
    <div class="main_content">
    <div class="drawer-content">
      <div class="content-placeholder">
        <div class="content-1"></div>
      </div>
      <div class="content-placeholder">
        <div class="content-2"></div>
      </div>
      <div class="content-placeholder">
        <div class="content-3"></div>
      </div>      
    </div>
    </div>
  </div>
  <div class="other-content">
    following web content......sadfa
    sdfj
    asdjf
    sadjf
    sadjf
    jsad
    fjklxzcjlkzxcjv;lkjslkdjfl;kjaskdljflksd
    f
    asdf
    asd
    f
    adsf
    asd
    f
    ads
    fasd
    f
    asd
    fasd
    f
    asd
    fsad
    f
    adsf
    asd
    f
    asdfasd
    fasd
    f
    asdf
    asd
    fa
    sdfa
    sdjf
    asdjf
    aksdjfalskdjflkasdjflkjadslkjflkasf
    
  </div>

CSS

.main_content{
  position:relative;
  z-index:1;
  display:none;
}

.drawer {
    border: 1px solid green;
    height: 100px;
    position: fixed;
    width: 100%;
}
.drawer-navbar {
    width: 100%;
}
.drawer-content {
    overflow-x: hidden;
    transition: all 0.3s ease 0s;
    width: 5000px;
  position:relative;
}
.drawer-content.show {
    max-height: 700px;
}
.content-placeholder {
    border: 1px solid yellow;
    float: left;
    top: 90px;
    
}
.content-placeholder > div {
    transition: all 0.5s ease 0s;
}
.content-placeholder.current {
    border: 5px solid yellow;
}
.content-1 {
    background-color: red;
    height: 300px;
}
.content-2 {
    background-color: green;
    height: 200px;
}
.content-3 {
    background-color: blue;
    height: 100px;
}
.other-content {
    position: relative;
    top: 100px;
}

JavaScript

$(document).ready(function () {
  var show1 = false,
      show2 = false,
      show3 = false,
      
      content1 = $('.btn-1'),
      content2 = $('.btn-2'),
      content3 = $('.btn-3');
  
  $('.content-placeholder').css("width", $(window).width());
  
  var w = $(window).width() + 30;
  
  $(window).resize(function () {
    w = $(window).width() + 30;
  });
  
  function checkDrawer (shouldOpen) {
    if (shouldOpen) {
      $('.drawer-content').addClass('show');
    } else {
      $('.drawer-content').removeClass('show');
    }
  }
  
  $('.btn-1').on('click', function () {
    show1 = !show1;
    show2 = false;
    show3 = false;
    checkDrawer(show1 || show2 || show3);
    if($('.btn-1').hasClass( "current" ))
      {
        $('.main_content').slideUp(1000);
        content1.removeClass('current');
      }
    else
      {
        $('.main_content').slideDown(1000);
        content1.addClass('current');
      }
    $('.drawer-content').css('transform', 'translate(0, 0)');
    
    
    content2.removeClass('current');
    content3.removeClass('current');
  });
  
  $('.btn-2').on('click', function () {
    show1 = false;
    show2 = !show2;
    show3 = false;
    checkDrawer(show1 || show2 || show3);
    
    
    
    $('.drawer-content').css('transform', 'translate(-' + w + 'px, 0)');
    
    
    content1.removeClass('current');
    
    content3.removeClass('current');
    
  });
  
  $('.btn-3').on('click', function () {
    show1 = false;
    show2 = false;
    show3 = !show3;
    checkDrawer(show1 || show2 || show3);
 
    $('.drawer-content').css('transform', 'translate(-' + 2 * w + 'px, 0)');
    

    content1.removeClass('current');
    content2.removeClass('current');
    content3.addClass('current');
  });
});