JSFiddle - React, Tailwind, and code Playground

HTML

<div class="somediv">
    <input type="checkbox" />
</div>

CSS

.somediv {
    width: 100px;
    height: 100px;
    background-color: navy;
}

.somediv input {
    position: relative;
    left: 4em;
    top: 2em;
}

JavaScript

$('.somediv').click(function() {
    var conflict = $(this).find('input').is(':hover');
    if (conflict != true) {
        alert('navy block was clicked');
    } else {
        alert('checkbox was clicked');
    }
});