JSFiddle - React, Tailwind, and code Playground

by antelopelovefan

HTML

<div id="Test"></div>

<a href="#" data-color="#ff0000">Red</a><br />
<a href="#" data-color="#00ff00">Green</a><br />
<a href="#" data-color="#0000ff">Blue</a><br />

CSS

#Test { width: 320px; height: 240px; border: 1px solid black;}

JavaScript

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
            var settings = {
                borderColor: '#00ff00'  
            };
            
            if(typeof opts == 'object') {
              $.extend(settings, opts);   
            }
            
            $(this).css('border', '1px solid ' + settings.borderColor);
        }); 
    };
})(jQuery);

$(document).ready( function() {
    $('a').click( function(e) {
       $('#Test').borderize({borderColor: $(this).data('color')});
       e.preventDefault();
    });
});