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>

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 + parseInt($div1.css('borderLeftWidth'),10);
      var y1 = $div1.offset().top + parseInt($div1.css('borderTopWidth'),10);
      var h1 = $div1.innerHeight();
      var w1 = $div1.innerWidth();
      var b1 = y1 + h1 - 1;
      var r1 = x1 + w1 - 1;
      var x2 = $div2.offset().left + parseInt($div2.css('borderLeftWidth'),10);
      var y2 = $div2.offset().top + parseInt($div2.css('borderTopWidth'),10);
      var h2 = $div2.innerHeight();
      var w2 = $div2.innerWidth();
      var b2 = y2 + h2 - 1;
      var r2 = x2 + w2 - 1;
        
      return (r1 >= x2 && r2 >= x1 && b1 >= y2 && b2 >= y1);
    }

$( 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')));
}