JSFiddle - React, Tailwind, and code Playground

HTML

<div class="selesti-feedback-tab" title="click to leave feedback/submit a bug" data-state="closed">
        <img src="http://i49.tinypic.com/wb7vw9.png" />
    </div>
    <div class="selesti-feedback-menu">
        <h5>MEOOOWWW</h5>
        <div class="selesti-feedback-menu-wrap">
            <div class="selesti-feedback-btn">Mark Area</div>
            <div class="selesti-feedback-btn">Comments</div>
            <div class="selesti-feedback-btn">View Bugs</div>
        </div>        
    </div>

CSS

body {
 background-image:url("http://i45.tinypic.com/sotxf7.png");   
}
body { height:900px; width:100%}
.selesti-feedback-tab {
    position: fixed;
    top:20%;
    right:-1px;
    width:25px;
    height:25px;
    background-color: #ffffff;
    border: 1px solid #999999;
    border-right:none;
    cursor:pointer;
    -webkit-transition: background-color .5s;
       -moz-transition: background-color .5s;
         -o-transition: background-color .5s;
            transition: background-color .5s;
    z-index:99999;
    /* Test Class */
    right:100px;
}
.selesti-feedback-tab:hover {
    background-color: black;
}
.selesti-feedback-tab img {
    width:97%;
    height: auto;
    display:block;
    margin-top:2px;
}
.selesti-feedback-menu {
    width:100px;
    height:140px;
    position:fixed;
    right:-102px;
    top:20%;
    border:1px solid #999999;
    z-index:99998;
    font-family:arial;
    font-size:14px;
    color:#999999;
    background-color:#fff;
    /* Test Class */
    right:-1px;
}

.selesti-feedback-menu h5 {
    width:60px;
    height:30px;
    text-indent:-99999px;
    overflow:hidden;
    background-size: 90px auto;
    background-position: -18px 4px;
    background-repeaT:no-repeat;
    margin-left:22px;
}
.selesti-feedback-menu-wrap {
 padding:5px;   
}
.selesti-feedback-btn {
    width:90%;
    margin:5px auto;
    background-color:#64B0EF;
    color:white;
    text-align:center;   
    padding:5px;
    cursor:pointer;
    border:1px solid white;
}
.selesti-feedback-btn:hover {
    border:1px solid #64B0EF;
    color:#64B0EF;
    background-color:white;
}
.selesti-feedback-overlay {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:99996;
    background-color:rgba(255,255,255,0.4);
}
.selection-box {
    position:    absolute;
    background: red;
    border:     1px solid #000;
    z-index:99997;
  }

JavaScript

$(function() {
    var pageID = document.location.pathname;
    var defaultMarkup = document.documentElement.innerHTML;

    $('.selesti-feedback-menu').attr('data-pageId', pageID);

    $('.selesti-feedback-tab').click(function() {
        var state = $(this).attr('data-state');

        if (state == "closed") {
            $(this).attr('data-state', 'open');
            $('.selesti-feedback-menu').animate({
                'right': '-1px'
            });
            $('.selesti-feedback-tab').animate({
                'right': '100px'
            });
        }
        else {
            $(this).attr('data-state', 'closed');
            $('.selesti-feedback-menu').animate({
                'right': '-102px'
            });
            $('.selesti-feedback-tab').animate({
                'right': '-1px'
            });
        }
    });

    $('body').append("<div class='selesti-feedback-overlay' style='display:none;'></div>");

    $('.selesti-feedback-btn').live('click', function() {
        setupCanvas();
    });

    var setupCanvas = function() {
        var overlayMarkup = "<div class='selesti-feedback-overlay'></div>";
        var docHeight = $(document).outerHeight();
        var docWidth = $(document).outerWidth();

        
        $('.selesti-feedback-overlay').css({
            'width': docWidth,
            'height': docHeight,
            'display': 'block'
        });

    };

    var startDrawing = function() {
        initDraw();
    };

    window.bugID = 0;
    window.canvas = $('.selesti-feedback-overlay');

    canvas.live('mousedown', function(e) {

        if(e.target != this){ return true; }

        bugID++;
     
        window.click_y = e.pageY;
        window.click_x = e.pageX;


        canvas.append('<div class="selection-box" id="bugID-' + bugID + '"></div>');

        window.bugBox = $('#bugID-' + bugID);

        bugBox.css({
            'top': click_y,
            'left': click_x,
            'width': 0,
            'height': 0
 ...