JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<div class="slider">
    <div class="tab">Click Here</div>
    <div class="inner-pane"> <span>Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content
        Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content
        Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content
        Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content
        Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content
        Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content Some inner contentSome inner content Some inner content Some inner content Some inner content Some inner content Some inner content Some inner content</span>

    </div>
</div>

CSS

.slider {
    position: fixed;
    top: 100px;
}
.slider .tab {
    position: relative;
    left: 95%;
    width: 75px;
    top: -18px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    background-color: #f87a2f;
    padding: 5px;
}
.slider .tab:hover {
    cursor: pointer;
}
.slider .inner-pane {
    position: relative;
    top: -76px;
    width: 95%;
    background-color: #f87a2f;
}

JavaScript

$(function ($) {
    var sliderUi = {
        config: {
            slider: ".slider",
            tab: ".slider .tab",
            innerPane: ".slider .inner-pane"
        },

        init: function () {
            this._bind(this.config.tab, "click", function () {
                    $(sliderUi.config.slider).animate({
                        "left": "-100%"
                    }, 1000);
            });
        },

        _bind: function (target, event, args) {
            $(target)[event](args);
        }
    };

    sliderUi.init();

}(jQuery));