JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="//tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<div class="slide-out-div"> <a class="handle" href="http://link-for-non-js-users.html">Content</a>

  <h3>Contact me</h3>

  <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
  <p>This can be a form to submit feedback, or contact info</p>
</div>

CSS

.slide-out-div {
  padding: 20px;
  width: 250px;
  background: #ccc;
  border: 1px solid #29216d;
}

JavaScript

(function($) {
  $.fn.tabSlideOut = function(callerSettings) {
    var settings = $.extend({
      tabHandle: '.handle',
      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

    if (settings.pathToTabImage != null) {
      settings.tabHandle.css({
        'background': 'url(' + settings.pathToTabImage + ') no-repeat',
        'width': settings.imageWidth,
        'height': settings.imageHeight
      });
    }

    settings.tabHandle.css({
      'display': 'block',
      'textIndent': '-99999px',
      'outline': 'none',
      'position': 'absolute'
    });

    obj.css({
      'line-height': '1',
      'position': settings.positioning
    });


    var properties = {
      containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
      containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
      tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
      tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
    };

    //set calculated css
    if (settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
      obj.css({
        'left': settings.leftPos
      });
      settings.tabHandle.css({
        'right': 0
      });
    }

    if (settings.tabLocation === 'top') {
      obj.css({
        'top': '-' + properties.containerHeight
      });
      settings.tabHandle.css({
        'bottom': '-' +...