JSFiddle - React, Tailwind, and code Playground

by Akshay_25

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-3 col-xs-offset-4 text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a justo non dolor cursus aliquet at egestas enim. Vivamus et ligula faucibus, tincidunt lectus pharetra, porta nisl. Vivamus vulputate tristique semper. Donec suscipit eros quis nunc egestas cursus dictum ut metus. Sed rhoncus odio eu urna dapibus, ut maximus eros commodo. Ut vehicula molestie felis vitae cursus. Donec at eros eleifend, dapibus arcu ac, dignissim nisi. Nam ligula dui, vulputate eu sapien in, bibendum ullamcorper sapien. Sed blandit orci sit amet tincidunt ornare. Praesent diam tortor, vulputate sed tortor at, porta tincidunt purus. Ut laoreet purus vitae quam mattis consectetur. Fusce pharetra mi justo, a efficitur sapien pulvinar eu. Donec vitae massa porta, mattis metus eget, fringilla dui.</p>

        <p>Cras sed ante lacinia, feugiat leo eget, elementum sapien. Maecenas elit erat, sodales vel eros eu, gravida scelerisque libero. Praesent id nisi ac tellus luctus vestibulum. Nam porttitor consectetur tristique. Phasellus porttitor, ex dapibus consequat dapibus, orci nibh vehicula tortor, in scelerisque nunc dolor sit amet erat. Donec eget justo feugiat, dignissim magna a, viverra dolor. Integer in facilisis massa, non pulvinar justo. Quisque cursus, orci quis feugiat consequat, eros massa rutrum justo, sed rhoncus nulla ante a ex. Integer ullamcorper, mauris feugiat maximus viverra, lorem tellus euismod justo, sit amet tristique neque erat vel magna. Aliquam eleifend sed tortor vel vulputate. Mauris luctus felis in ante lobortis, eget placerat ante aliquet.</p>

        <p>Proin eu augue posuere, consectetur augue ut, aliquet sem. Proin lacinia et nulla nec faucibus. Donec in mattis orci. Fusce blandit metus metus. Suspendisse sit amet eleifend purus, vitae congue augue. Sed sollicitudin et libero...

CSS

#slidebox {
    width: 300px;
    height: 250px;
    background-color: white;
    border: 1px solid black;
    padding: 20px;
    -webkit-box-shadow: -10px -10px 50px 5px #A6A6A6;
    box-shadow: -10px -10px 50px 5px #A6A6A6;
}

JavaScript

// PLUGIN DEFINITION (1/2)
;(function($) {

    $.fn.extend({
        slideBox: function(options) {
            if (options && typeof(options) == 'object') {
                options = $.extend({}, $.slideBox.defaults, options);
            }

            if($(this).length == 1) {
                new $.slideBox(this, options);
            } else if($(this).length > 1) {
                console.error($.messages.severalElements);
            } else if($(this).length == 0) {
                console.error($.messages.zeroElement);
            }

            return this;
        }
    });

    $.messages = {
        severalElements: '[jQuery.slideBox] Error: you have targetted more than one slideBox. Please use a different selector.',
        zeroElement: '[jQuery.slideBox] Error: could not find the slideBox in the DOM. Are you sure the selector is correct?'
    };

    $.closed = false;

    $.position = {
        horizontal: null,
        vertical: null
    };

    $.slideBox = function(elem, option) {
        var options  = option || $.slideBox.defaults
            , threShold = typeof(options.target) != 'number' ? $(options.target).offset().top : options.target;

        if($(elem).length === 1) {
            $.slideBox.applyCss(elem, options);

            $(window).on('scroll', function() {

                if($(this).scrollTop() + $(window).height() > threShold) {
                    if(!$(elem).is(':visible') && !$(elem).is(':animated')) {
                        $.slideBox.showBox(elem, options);
                        $(elem).find(options.closeLink).on('click', function(e) {
                            e.preventDefault();
                            $.closed = true;
                            $.slideBox.hideBox(elem, options);
                        });
                    }
                } else {
                    if($(elem).is(':visible') && !$(elem).is(':animated')) {
                        $.slideBox.hideBox(elem, options);
                    }
  ...