JSFiddle - React, Tailwind, and code Playground

HTML

<h1>The "bar" bubble should be moving</h1>
<div class="outer">
    <svg class="inner">
        <circle cx=50% cy=50% r="3" stroke="black" stroke-width="1" fill="red" />
    </svg>
</div>

CSS

h1 {
    font-family: sans-serif;
    font-size: 12pt;
    margin-top: 8px;
    margin-bottom: 8px;
}

div.outer {
    position: relative;
    border: 1px solid gray;
    width: 500px;
    height: 500px;
}
svg.inner {
    width: 100%;
    height: 100%;
}
.bubble-content {
    padding: 3px;
    border-radius: 4px;
    background-color: #ddd;
}
.bubble {
    padding: 2px;
    z-index: 100;
    position: absolute;
    border-radius: 6px;
}
.bubble:after {
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    content:" ";
}

CoffeeScript

_side   = { above: "top",  below: "bottom", left: "left", right: "right" }
_sign   = { above: -1,     below: 1,        left: -1,     right: 1 }
_dim    = { above: "x",    below: "x",      left: "y",    right: "y" }
_margin = { above: "left", below: "left",   left: "top",  right: "top" }
    
update = (div, id, loc, x, y, size, offset, color, outline_color="#222") ->
    content = div.children()
    content.css({ backgroundColor: color })
    w = div.outerWidth()
    h = div.outerHeight()
    angle = Math.atan(offset/size)*180/Math.PI
    scale = switch loc
        when "above", "below" then Math.abs((w/6)/size)
        when "left", "right"  then Math.abs((h/6)/size)
    
    side   = _side[loc]
    sign   = _sign[loc]
    dim    = _dim[loc]
    margin = _margin[loc]

    transform = """
        translate#{dim}(#{-offset}px) 
        skew#{dim}(#{sign*angle}deg) 
        scale#{dim}(#{scale})
    """
    
    css_text = """
        border-width: #{size}px;
        margin-#{margin}: #{-size}px;
        #{side}: 100%;
        #{margin}: 50%;
        border-#{side}-color: #{outline_color};
        -webkit-transform: #{transform};
           -moz-transform: #{transform};
            -ms-transform: #{transform};
             -o-transform: #{transform};
                transform: #{transform};
    """
    
    style = """
    ##{id}::after {
      #{css_text}
    }
    """
    ss = document.styleSheets[0]
    rules = ss.cssRules || ss.rules
    found = null
    for rule in rules
      if rule.selectorText.indexOf("#{id}") > -1
        found = rule
        break
    
    if not found?
      document.styleSheets[0].insertRule(style)
    else
      found.style.cssText = css_text
    
    css = switch loc
        when "above" then { top: "#{y-size-h}px",       left: "#{x-(w/2)+offset}px" }
        when "below" then { top: "#{y+size}px",         left: "#{x-(w/2)+offset}px" }
        when "left"  then { top: "#{y-(h/2)+offset}px", left: "#{x-size-w}px"       }
        when...