JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <div id="slideOut" class="clearfix">
        <div id="slideContent">
            <div style="padding:30px;">
                CONTENT
            </div>
        </div>
        <div id="slideClick">
            <div class="arrowMsg">
                <i class="fa fa-info-circle slideOpen hideBtn"></i>
                <i class="fa fa-times slideClose"></i>
            </div>
        </div>
    </div>

    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
   ...

CSS

.hideBtn { display:none !important; }
#slideOut { position: fixed; width: 395px; top: 42px; right: -345px; }
#slideClick { float: left; height: 50px; width: 50px; background: #e56600; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; cursor: pointer; text-align: center; }
    #slideClick i { color:#fff; line-height:50px; font-size:28px; }
#slideContent { background: #e56600; width: 345px; float: right; color: #fff; }
    #slideContent p { color:#fff; }
    #slideContent a { color:#fff; font-weight:700; text-decoration:none; }
        #slideContent a.linkbuttons { text-decoration:none; padding: 8px 0px 8px 0px; width:100%; }
    #slideContent a:hover { color:#fff; font-weight:700; text-decoration:none; }

JavaScript

$(document).ready(function () {
    if ($.cookie('myCookieName')) {
        $(".slideClose").addClass('hideBtn');
        $(".slideOpen").removeClass('hideBtn');
        $('#slideClick').data('it', 1);
    }else{
    		setTimeout(function(){
        $('#slideClick').data('it', 1);
        $('#slideClick').click()
        },2000);
    }
});

$('#slideClick').click(function () {
    var it = $(this).data('it') || 2;
    switch (it) {

        case 2:
            $(this).parent().animate({
                right: '-345px'
            }, {
                queue: false,
                duration: 500
            });
            $(".slideClose").addClass('hideBtn');
            $(".slideOpen").removeClass('hideBtn');
            break;

        case 1:
            $(this).parent().animate({
                right: '+=345px'
            }, {
                queue: false,
                duration: 500
            });
            $(".slideOpen").addClass('hideBtn');
            $(".slideClose").removeClass('hideBtn');
            break;

    }
    it++;
    if (it > 2) it = 1;
    $(this).data('it', it);
    //$.cookie('myCookieName', '1')
    var date = new Date();
    var minutes = 1;
    date.setTime(date.getTime() + (minutes * 60 * 1000));
    $.cookie("myCookieName", "foo", { expires: date });
});