JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Выезжающее меню</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<html>



<script type="text/javascript">
$(function(){
	$('.ui_float_panel_1').tabSlideOut({							//Класс панели
		tabHandle: '.ui_handle_1_out',						//Класс кнопки
		pathToTabImage: '',				//Путь к изображению кнопки button.gif
		imageHeight: '122px',						//Высота кнопки
		imageWidth: '40px',						//Ширина кнопки
		tabLocation: 'top',						//Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
		speed: 300,								//Скорость анимации
		action: 'click',								//Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
		topPos: '200px',							//Отступ сверху
		fixedPosition: false						//Позиционирование блока false - position: absolute, true - position: fixed
	});
});
</script>


</head>
<body>






<div class="ui_float_panel_1">
<div class="ui_handle_1_out">
<div class="ui_handle_1_in">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
Любое содержание здесь!
</div>



<div class="page_content">Контент</div>





</body>

</html>

CSS

body 
{
padding:0px;
margin:0px;


}

.ui_float_panel_1 {

padding: 10px;
background: #222A37;
border: 1px solid #383838;
color:#CDCFD2;
font-family: Arial;
font-size: .875rem;
width: 100%;
height: 60px;
left:0 !important;

}

.ui_handle_1_out
{

width: 18px;
height: 18px;
padding: 8px;
background: #222A37;
border: 1px solid #383838;
color:#CDCFD2;
font-family: Arial;
cursor:pointer;
margin-left: -1px;
}


.ui_handle_1_in
{
position: absolute;
margin-top:3px;
}



.bar{
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #0C7ECB;
border-radius: 1px;   
}



.page_content
{
width: 100vw;
height: 100vh;
background-color: #FF9966;
border: 1px solid #000000;
}

JavaScript

/*
    tabSlideOUt v1.1
    
    By William Paoli: http://wpaoli.building58.com

    To use you must have an image ready to go as your tab
    Make sure to pass in at minimum the path to the image and its dimensions:
    
    example:
    
        $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
                pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab *required*
                imageHeight: '133px',                         //height of tab image *required*
                imageWidth: '44px',                           //width of tab image *required*    
        });

    
*/


(function($){
    $.fn.tabSlideOut = function(callerSettings) {
        var settings = $.extend({
            tabHandle: '.ui_handle_1',
            speed: 300, 
            action: 'click',
            tabLocation: 'left',
            topPos: '200px',
            leftPos: '20px',
            fixedPosition: false,
            positioning: 'absolute',
            pathToTabImage: null,
            imageHeight: null,
            imageWidth: null                       
        }, callerSettings||{});

        settings.tabHandle = $(settings.tabHandle);
        var obj = this;
        if (settings.fixedPosition === true) {
            settings.positioning = 'fixed';
        } else {
            settings.positioning = 'absolute';
        }
        
        //ie6 doesn't do well with the fixed option
        if (document.all && !window.opera && !window.XMLHttpRequest) {
            settings.positioning = 'absolute';
        }
        
        //set initial tabHandle css
        settings.tabHandle.css({ 
            /* 'display': 'block', */
            'textIndent' : '-99999px',
'left': '0px',
            'outline' : 'none',
            'position' : 'absolute'
        });
        
        obj.css({
            'line-height' : '1',
     ...