JSFiddle - React, Tailwind, and code Playground

HTML

<li class="inset_header1 " id="inset_header1" onClick="click_header_inset(1);"><a href="#"><div class="icon"><i class="fa fa-home"></i></div>пункт 1</a></li>
 

<div class="block_inset">
 <div class="inset_num" id="inset_num1">
 <div class="inset_content">
 <h2>Блок пункта 1</h2>     
 </div>
 </div>
       
<div class="reltr" id="inse_num">A</div>   
 </div>

CSS

.block_inset { 
 position:absolute;
 top:0px;
 bottom:0px; 
 left:113px;
 width:340px; 
 height:110%;
 overflow-x:hidden; 
 }
 


.inset_content { 
 position:relative;
 margin:0px; 
 padding:0px;
 width:100%; 
 height:100%;
 color:#fff;   
 background-color: rgba(0, 0, 0, 0.8); 
 overflow-y:auto;
}
.inset_num { 
 position:absolute; 
 top:0px;
 bottom:0px; 
 width:300px; 
 height:100%;
 left:-300px;
 z-index:3; 
}
.reltr{
 z-index:2;
 left:0px;   
 width: 40px;
 height: 100%; 
 position: absolute;
 background:#b5b5b5;
 top:0; 
}
 .inset_header1{
   background:red;
 position: absolute;
 width: 43px;
 height: 40px;
  z-index:3;
 left:0px;  
 top:40px;
 }

JavaScript

time_pause_motor=1;
delta_x=10;
set_motor=false;
open_inset_num=0;
width_header=0;

function setCookie(name, value, days) {}
function getCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
 }
 return null;
}

var blockStateCookie = getCookie('blockState');
blockStateCookie && click_header_inset(blockStateCookie)
function click_header_inset(n_inset)
  { setCookie('blockState', n_inset, 1000);  
   
   if (!set_motor)
     {
      next_open_num=0;
      if (open_inset_num==0)
        { 
         num_inset_motor=n_inset;
         flag_inset_motor=1;
         set_motor=true;
         motor_inset();
        }
       else
         {
          if (n_inset!=open_inset_num) next_open_num=n_inset;
          num_inset_motor=open_inset_num;
          flag_inset_motor=-1;
          set_motor=true;
          motor_inset();
          
         }
     }
   
  }

function motor_inset()
  {
   if (flag_inset_motor==0) return;
   obj_name="inset_num"+num_inset_motor;  
   obj_inset=document.getElementById(obj_name);
   x_inset_motor=obj_inset.offsetLeft;
   
   x_inset_motor+=flag_inset_motor*delta_x;
   
   if (flag_inset_motor>0)
     {
      if (x_inset_motor>0)
        {
         x_inset_motor=0;
         set_motor=false;
         open_inset_num=num_inset_motor;  
        }
     }
    else
      {
       if (x_inset_motor<=width_header-obj_inset.offsetWidth)
         {
          x_inset_motor=width_header-obj_inset.offsetWidth;
          set_motor=false;
          open_inset_num=0;  
          if (next_open_num>0)
            {
             
             num_inset_motor=next_open_num;
             next_open_num=0;
             flag_inset_motor=1;
             set_motor=true;
             
            }
         }
       
      }
  ...