JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gear">
    <div class="inner-gear blue">
    </div>
    <div class="inner-gear yellow">
    </div>
    <div class="inner-gear red">
    </div>
    <div class="inner-gear green">
    </div>
</div>

<div class="gear-small">
    <div class="inner-gear red">
    </div>
    <div class="inner-gear green">
    </div>
    <div class="inner-gear yellow">
    </div>
    <div class="inner-gear blue">
    </div>
</div>

<div id="result"></div>

<div id="bb" style="background:rgba(0,0,0,0.5); position:absolute;"></div>

CSS

.gear{
    position:absolute;
    top:100px;
    left:100px;
    width:200px;
    height:200px;
   
    overflow: hidden;
}
.gear-small{
      position: absolute;
  top: 149px;
  left: 149px;
  width: 100px;
  height: 100px;
  border-radius: 100px;
    border: 1px solid white;

  overflow: hidden;
}
.inner-gear {
    width: 49%;
    float:left;
    height: 50%;
    display:inline-block;
    border-right: 1px solid white;
    border-top: 1px solid white;
}
.inner-gear {
    width: 49%;
    float:left;
    height: 50%;
    display:inline-block;
    border-right: 1px solid white;
    border-top: 1px solid white;
}
.inner-gear {
    width: 49%;
    float:left;
    height: 50%;
    display:inline-block;
    border-right: 1px solid white;
    border-top: 1px solid white;
}


.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.green {
    background-color: green;
}

#result {
    color:black;
}
}

JavaScript

var degree = 0;
var degreeSmall = 0;
var timer=30;
var $spin = $(".gear");
var $spinSmall = $(".gear-small");
var to;
var toSmall;

    function collision($div1, $div2) {
      var x1 = $div1.offset().left;
      var y1 = $div1.offset().top;
      var h1 = $div1.outerHeight(true);
      var w1 = $div1.outerWidth(true);
      var b1 = y1 + h1;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var y2 = $div2.offset().top;
      var h2 = $div2.outerHeight(true);
      var w2 = $div2.outerWidth(true);
      var b2 = y2 + h2;
      var r2 = x2 + w2;
      
      $('#bb').offset({left:x1,top:y1}).width(w1).height(y1);
      
      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
      return true;
    }

$( document ).ready(function() {
    rotate();
});


function rotate() {
    degree++;
    $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});  
    $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

    to = setTimeout(function() {
        rotate();
    }, timer);
   
    $('#result').text(collision($('.gear .inner-gear.yellow'), $('.gear-small .inner-gear.yellow')));

}