JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="drawn-border box-1" data-border-watch>
  <p>Pellentesque dapibus hendrerit tortor. Etiam ut purus mattis mauris sodales aliquam. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Aenean viverra rhoncus pede.</p>
  <p>Aenean massa. Fusce commodo aliquam arcu. Nunc nulla. Mauris sollicitudin fermentum libero.</p>
  <p>Vivamus in erat ut urna cursus vestibulum. Sed lectus. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Ut non enim eleifend felis pretium feugiat. Aenean massa.</p>
  <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nulla consequat massa quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sollicitudin fermentum libero. Nulla sit amet est.</p>
  <p>Nulla porta dolor. Ut tincidunt tincidunt erat. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Praesent adipiscing. Donec venenatis vulputate lorem.</p>
  <p>Donec posuere vulputate arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur suscipit suscipit tellus. Suspendisse potenti. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.</p>
  <p>Pellentesque dapibus hendrerit tortor. Etiam ut purus mattis mauris sodales aliquam. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Aenean viverra rhoncus pede.</p>
  <p>Aenean massa. Fusce commodo aliquam arcu. Nunc nulla. Mauris sollicitudin fermentum libero.</p>
  <p>Vivamus in erat ut urna cursus vestibulum. Sed lectus. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Ut non enim eleifend felis pretium feugiat. Aenean massa.</p>
  <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nulla consequat massa quis enim....

CSS

html,body{
  font-size: 14px;
  font-family: monospace;
  color: #c3dee5;
  background-color: #193238;

}

.box-2{
  width: 50%;
}

.drawn-border.bw-load{
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 1rem;
  background-image: url(http://dummyimage.com/1000x1000/214149/2c5863.png);
  }
  /* Vertical */
  .drawn-border.bw-load.db-1x2{
    background-image: url(http://dummyimage.com/1000x2000/214149/2c5863.png);
  }
  .drawn-border.bw-load.db-1x3{
    background-image: url(http://dummyimage.com/1000x3000/214149/2c5863.png);
  }
  .drawn-border.bw-load.db-1x4{
    background-image: url(http://dummyimage.com/1000x4000/214149/2c5863.png);
  }
  /* Horizontal */
  .drawn-border.bw-load.db-2x1{
    background-image: url(http://dummyimage.com/2000x1000/214149/2c5863.png);
  }
  .drawn-border.bw-load.db-3x1{
    background-image: url(http://dummyimage.com/3000x1000/214149/2c5863.png);
  }
  .drawn-border.bw-load.db-4x1{
    background-image: url(http://dummyimage.com/4000x1000/214149/2c5863.png);
  }

  /* Variation 2 */
  .drawn-border.bw-load.variation-2{
    background-image: url(http://dummyimage.com/1000x1000/222/555.png);
  }
  /* Vertical */
  .drawn-border.variation-2.bw-load.db-1x2{
    background-image: url(http://dummyimage.com/1000x2000/222/555.png);
  }
  .drawn-border.variation-2.bw-load.db-1x3{
    background-image: url(http://dummyimage.com/1000x3000/222/555.png);
  }
  .drawn-border.variation-2.bw-load.db-1x4{
    background-image: url(http://dummyimage.com/1000x4000/222/555.png);
  }
  /* Horizontal */
  .drawn-border.variation-2.bw-load.db-2x1{
    background-image: url(http://dummyimage.com/2000x1000/222/555.png);
  }
  .drawn-border.variation-2.bw-load.db-3x1{
    background-image: url(http://dummyimage.com/3000x1000/222/555.png);
  }
  .drawn-border.variation-2.bw-load.db-4x1{
    background-image: url(http://dummyimage.com/4000x1000/222/555.png);
  }

p{
  margin: 0 0 1rem 0;
  }
 ...

JavaScript

(function($){

  /**
   * Initialize borderWatch defaults and watchers
   * @param  {Object} options Extend existing defaults
   */
  $.fn.borderWatch = function(options){
    // Extend defaults
    var opts = $.extend({}, $.fn.borderWatch.defaults, options);
    $.fn.borderWatch.defaults = opts;
    $.fn.borderWatch.defaults.watchedElem = this;

    // Pattern rewrite
    var pattern = '(^|\\s)('+$.fn.borderWatch.defaults.classPrefix+')\\S+';
    $.fn.borderWatch.defaults.classRegex = new RegExp(pattern,'g');

    // Default empty variation
    $.fn.borderWatch.defaults.variations.push('');

    // Initial load
    this.each(function(){
      $(this).addClass($.fn.borderWatch.defaults.loadedClass);
      $.fn.borderWatch.init(this);
    });
    // On resize
    var elem = this;
    $(window).resize(function(){
      $.fn.borderWatch.init(elem);
    });

    // Preload unused bgImages
    $.fn.preloadClasses($.fn.borderWatch.defaults.preloadTimeout);
  }

  /**
   * Runs border management on each element
   * @param  {Object} elem DOM object
   */
  $.fn.borderWatch.init = function(elem){
    $(elem).each(function(){
      $.fn.manageBorderClass(this);
    });
  }

  /**
   * borderWatch defaults
   * @type {Object}
   */
  $.fn.borderWatch.defaults = {
    classPrefix:    'db-',
    unitLimit:      3,
    rootClass:      'drawn-border',
    classRegex:     null,
    loadedClass:    'bw-load',
    watchedElem:    null,
    variations: [],
    preloadTimeout: 300
  }

  /**
   * Calculates interger only ratio within unit limit and adds applicable class
   * @param  {Object} elem DOM Object to check
   */
  $.fn.manageBorderClass = function(elem){
    // Get basic variables
    var eX = $(elem).width();
    var eY = $(elem).height();
    var eRatio = eX / eY;
    // Create interger ratio variable based on orientation
    if(eRatio < 1){
      var o = 'vertical';
      var eRatio = eY / eX;
      var rRatio = Math.round(eRatio);
    }else{
      var o =...