JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex">
  <div class="box outline-me">I'm outlined because I contain<br>the "outline-me" class</div>
  <div class="box clickable">Click me to toggle outline</div>
</div>
<hr>
<input type="text" placeholder="I'm outlined when focused" />

CSS

div {
  box-sizing: border-box;
}

.flex {
  display: flex;
}

.clickable {
  cursor: pointer;
}

.box {
  background: red;
  border: 1px solid black;
  border-radius: 10px;
  height: 5rem;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
  font-weight: bold;
  padding: 0.5rem;
  margin: 1rem;
}

JavaScript

// Called on an element to wrap with an outline and passed a styleObject
// the styleObject can contain the following outline properties:
// 		style, width, color, offset, radius, bottomLeftRadius,
//		bottomRightRadius, topLeftRadius, topRightRadius
// It then creates a new div with the properties specified and 
// moves the calling element into the div
// The newly created wrapper div receives the class "simulated-outline"
Element.prototype.addOutline = function (styleObject, hideOutline = true) {
    var element = this;

    // create a div for simulating an outline
    var outline = document.createElement('div');

    // initialize css formatting
    var css = 'display:inline-block;';

    // transfer any element margin to the outline div
    var margins = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
    var marginPropertyNames = { 
        marginTop: 'margin-top',
        marginBottom: 'margin-bottom',
        marginLeft: 'margin-left',
        marginRight: 'margin-right'
    }
    var outlineWidth = Number.parseInt(styleObject.width);
    var outlineOffset = Number.parseInt(styleObject.offset);
    for (var i = 0; i < margins.length; ++i) {
        var computedMargin = Number.parseInt(getComputedStyle(element)[margins[i]]);
        var margin = computedMargin - outlineWidth - outlineOffset;
        css += marginPropertyNames[margins[i]] + ":" + margin + "px;";
    }
    element.style.cssText += 'margin:0px !important;';
    
    // compute css border style for the outline div
    var keys = Object.keys(styleObject);
    for (var i = 0; i < keys.length; ++i) {
        var key = keys[i];
        var value = styleObject[key];
        switch (key) {
            case 'style':
                var property = 'border-style';
                break;
            case 'width':
                var property = 'border-width';
                break;
            case 'color':
                var property = 'border-color';
                break;
           ...