JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="sicBOX">
  
  <div id="sBOX_container">
  	<img id="sBOX_image" src="http://placekitten.com/g/300/500" />
  	<div id="sBOX_close">pliip</div>
  </div>
  
  <div id="sBOX_overlay"></div>

</div>




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing ligula ac ipsum dictum sit amet lacinia justo venenatis. Curabitur eu felis neque. Ut lacinia hendrerit varius. Cras nisi velit, venenatis et adipiscing auctor, accumsan a nulla. Vivamus at luctus justo. Ut eget ante nec velit sodales fringilla. In venenatis sem sit amet ligula rhoncus vulputate vel nec mi. Nullam urna felis, sagittis eget tristique eu, dapibus quis ipsum. Sed eget accumsan felis.

Duis dolor risus, lacinia elementum sollicitudin eget, interdum dapibus dolor. Sed dictum pulvinar nulla luctus fermentum. Praesent et arcu non mi convallis tristique ac at nulla. Sed id risus in velit dignissim egestas. Aliquam ultricies eros nec dolor gravida rhoncus. Nam cursus eleifend dapibus. In ultrices odio ut orci tristique sed faucibus odio tristique. Ut aliquet metus non tellus lacinia euismod. Pellentesque sollicitudin ligula eget justo commodo vel sagittis nisi molestie.

Morbi tempor ante ac nibh vestibulum ac iaculis libero blandit. Sed laoreet dui id eros ullamcorper lobortis. Donec et quam eu est tempus rutrum vel non quam. Praesent commodo feugiat turpis eget euismod. Phasellus facilisis tempus fringilla. Etiam eu mauris vitae quam iaculis fermentum a a odio. Maecenas sed enim vel augue lobortis eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum molestie turpis, at facilisis turpis sollicitudin eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam convallis, ligula a pulvinar pretium, lectus tellus tristique quam, ac laoreet purus nulla et elit. Maecenas vitae urna neque, in elementum eros. Integer eget diam nec purus ullamcorper congue a ac quam.

Duis ante sapien, eleifend eget luctus id,...

CSS

#sicBOX,
#sBOX_overlay {
  position: fixed;
  z-index: 9999;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

#sBOX_container {
	z-index: 1;
}

#sBOX_container,
#sBOX_image {
  float: left;
  position: relative;
  max-width: 100%;
  max-height: 100%;
}

#sBOX_close {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: #fff;
  color: #222;
  padding: 7px;
}

#sBOX_overlay { z-index: 0; background: #000; }

JavaScript

// Images loaded plugin
// https://github.com/desandro/imagesloaded
(function(c,q){var m="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(f){function n(){var b=c(j),a=c(h);d&&(h.length?d.reject(e,b,a):d.resolve(e));c.isFunction(f)&&f.call(g,e,b,a)}function p(b){k(b.target,"error"===b.type)}function k(b,a){b.src===m||-1!==c.inArray(b,l)||(l.push(b),a?h.push(b):j.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),r&&d.notifyWith(c(b),[a,e,c(j),c(h)]),e.length===l.length&&(setTimeout(n),e.unbind(".imagesLoaded",
p)))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():0,r=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),l=[],j=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",p).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");if(e&&e.src===d)k(a,e.isBroken);else if(a.complete&&a.naturalWidth!==q)k(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=m,a.src=d}):
n();return d?d.promise(g):g}})(jQuery);

var contPadding = 40,
	overlayopacity = 0.8,
	imageBorder = 10; 

$(document).ready(function() {
  $('#sicBOX').imagesLoaded(function() {
    
    var sicbox = $(this),
    	container = $('#sBOX_container', sicbox),
    	image = $('#sBOX_image', sicbox),
    	overlay = $('#sBOX_overlay', sicbox),
		iimgW = image.width(),
		iimgH = image.height(),
		win = $(window);
    
    sicbox.css({ padding: contPadding });
    overlay.css({ opacity: overlayopacity });
    container.css({ border: imageBorder + 'px solid white' });
    
    var hammertime = ( contPadding + imageBorder );
    
    function fit() {

      var winW = win.width(),
		  winH = win.height();

      if ( winH <= iimgH ) {
        image.height( winH - ( contPadding * 2 ) );
        winW <= ( image.width()  + ( contPadding * 2 ) ) && image.height('auto');
      }
      else {
      	image.height('auto');
    ...