JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
    <div class="left-top" rel="yellow"></div>
    <div class="right-top" rel="red"></div>
    <div class="right-bottom" rel="blue"></div>
    <div class="left-bottom" rel="lime"></div>
</div>
<div id="b">
    <div class="left-top" rel="yellow"></div>
    <div class="right-top" rel="red"></div>
    <div class="right-bottom" rel="blue"></div>
    <div class="left-bottom" rel="lime"></div>
</div>
<button id="r">rotate</button>
<input id="s" />

CSS

body, html {
    background: #eee;
    position: relative;
    height: 100%;
    padding: 0;
    margin: 0;
}

#a, #b {
    width: 100px;
    height: 100px;
    position: absolute;
    transform-origin: 50%;
    z-index: 99;
}

#a {
    background: #777;
    left: 50px;
    top: 50px;
    transform: rotateZ(10deg);
}

#b {
    background: #bbb;
    left: 170px;
    top: 60px;
    
}

#a div, #b div {
    width: 1px;
    height: 1px;
    position: absolute;
    visibility: hidden;
}

#a:hover div, #b:hover div {
    visibility: visible;
    outline: solid 1px blue;
}

.left-top { left: 0; top: 0; background: yellow; }
.right-top {right: 0; top: 0; background: red; }
.right-bottom { right: 0; bottom: 0; background:blue;}
.left-bottom { left: 0; bottom: 0; background: lime; }

input, button {
    position: fixed;  
    bottom: 10px;
    float: left;
}

input {
    left: 100px;
}


#dotline {
    width: 3px;
    height: 3px;
    background: orange;
    position: absolute;
    z-index: 300;
    
}

JavaScript

function isUndefined(a) {
    return a === undefined;
}

/**
 * Helper function to determine whether there is an intersection between the two polygons described
 * by the lists of vertices. Uses the Separating Axis Theorem
 *
 * @param a an array of connected points [{x:, y:}, {x:, y:},...] that form a closed polygon
 * @param b an array of connected points [{x:, y:}, {x:, y:},...] that form a closed polygon
 * @return true if there is any intersection between the 2 polygons, false otherwise
 */
function doPolygonsIntersect (a, b) {
    var polygons = [a, b];
    var minA, maxA, projected, i, i1, j, minB, maxB;

    for (i = 0; i < polygons.length; i++) {

        // for each polygon, look at each edge of the polygon, and determine if it separates
        // the two shapes
        var polygon = polygons[i];
        for (i1 = 0; i1 < polygon.length; i1++) {

            // grab 2 vertices to create an edge
            var i2 = (i1 + 1) % polygon.length;
            var p1 = polygon[i1];
            var p2 = polygon[i2];

            // find the line perpendicular to this edge
            var normal = { x: p2.y - p1.y, y: p1.x - p2.x };

            minA = maxA = undefined;
            // for each vertex in the first shape, project it onto the line perpendicular to the edge
            // and keep track of the min and max of these values
            for (j = 0; j < a.length; j++) {
                projected = normal.x * a[j].x + normal.y * a[j].y;
                if (isUndefined(minA) || projected < minA) {
                    minA = projected;
                }
                if (isUndefined(maxA) || projected > maxA) {
                    maxA = projected;
                }
            }

            // for each vertex in the second shape, project it onto the line perpendicular to the edge
            // and keep track of the min and max of these values
            minB = maxB = undefined;
            for (j = 0; j < b.length; j++) {
                projected =...