JSFiddle - React, Tailwind, and code Playground

by Vaniljs

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <div id="panel-slide">
        <div id="panel-slide-content">
            <!-- Family 2 modal -->
            <div class="search-family-slide">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam quidem assumenda, reiciendis distinctio nemo officiis unde rerum error architecto! Totam fugit unde nobis inventore eveniet architecto accusantium, nesciunt alias?
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam quidem assumenda, reiciendis distinctio nemo officiis unde rerum error architecto! Totam fugit unde nobis inventore eveniet architecto accusantium, nesciunt alias?
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam quidem assumenda, reiciendis distinctio nemo officiis unde rerum error architecto! Totam fugit unde nobis inventore eveniet architecto accusantium, nesciunt alias?
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam quidem assumenda, reiciendis distinctio nemo officiis unde rerum error architecto! Totam fugit unde nobis inventore eveniet architecto accusantium, nesciunt alias?
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam quidem assumenda, reiciendis distinctio nemo officiis unde rerum error architecto! Totam fugit unde nobis inventore eveniet architecto accusantium, nesciunt alias?
            </div>
        </div>
        <div id="panel-slide-sticker">
            <span>Копка для выезда панели</span>
        </div>
    </div>

CSS

#panel-slide {
            z-index: 99;
            position: fixed;
            top: 20%;
            left: -400px;
        }
        #panel-slide-content {
            border: 1px solid #dc9672;
            background: green;
            width: 388px;
            float: left;
            padding: 20px 5px;
            height: auto;
        }
        #panel-slide-sticker {
            float: left;
            position: relative;
            margin: 0;
            color: #fff;
            width: auto;
            cursor: pointer;
            writing-mode: tb-lr;
            /* Трансформируем текст */
            transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            /* Координаты точки трансформации */
            -ms-transform-origin: left top;
            -moz-transform-origin: left top;
            -webkit-transform-origin: left top;
            transform-origin: left top;
            -webkit-appearance: none;
            border: 0;
            left: 34px;
            background: blue;
            padding: 5px 25px;
            font: 500 20px/24px AgoraSlab;
            border-radius: 50px;
            box-shadow: inset 0 80px 80px -40px blue;
            -webkit-transition: all .2s ease-out 0;
            transition: all .2s ease-out 0;
        }

JavaScript

(function($) {
            $(document).ready(function() {
                var $panel = $('#panel-slide');
                if ($panel.length) {
                    var $sticker = $panel.children('#panel-slide-sticker');
                    var showPanel = function() {
                        $panel.animate({
                            left: '+=400',
                        }, 200, function() {
                            $(this).addClass('visible');
                        });
                    };
                    var hidePanel = function() {
                        $panel.animate({
                            left: '-=400',
                        }, 200, function() {
                            $(this).removeClass('visible');
                        });
                    };
                    $('#panel-slide-sticker').click(function() {
                        if ($panel.hasClass('visible')) {
                            hidePanel();
                        } else {
                            showPanel();
                        }
                    }).andSelf()
                        .children('.close').click(function() {
                        $panel.remove();
                    });
                }

                $(document).click(function(e) {
                    if (!$panel.has(e.target).length && $panel.hasClass('visible')) {
                        hidePanel();
                    }
                });

            });
        })(jQuery);