JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">Uses Options</div>

<div class="test" data-background="green">Uses options and Data</div>

CSS

div {
  background: #c2c2c2;
  border: 1px solid #999999;
  padding: 10px;
  float: left;
  margin: 20px;
}

JavaScript

(function($) {
  $.fn.extend({
    test: function(options) {

      var defaults = {
        background: null,
        height: null
      };

      var options = $.extend(defaults, options);

      return this.each(function() {
         obj = $(this),
          objD = obj.data(),
          o = $.extend(true, {}, options, objD);

        obj.css({
          background: o.background,
          height: o.height
        });

      });
    }
  });
})(jQuery);

$(document).ready(function() {
  $('.test').test({

    background: 'red',
    height: 400

  });
});