JSFiddle - React, Tailwind, and code Playground

HTML

<div class="canary">
    <h1> hi, I detect inputs </h1>
    <div class="mouse hidden">We have a mouse!</div>
    <div class="touch hidden">We have touch!</div>
        
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

.hidden {
    display: none;
}

.canary {
    background-color: #eee;
    height: 100%;
    width: 100%;
}

.canary:hover {
    background-color: green;
}

.canary:active {
    background-color: red;
}

JavaScript

$(function() {
    
    var bindEvents = function () {
        $('.canary').off('click');
        $('.canary').on('mouseover', detectThing);
        $('.canary').on('touchstart', detectThing);
    }
    
    var unbindEvents = function () {
        $('.canary').off('mouseover');
        $('.canary').off('touchstart');
    }
    
    var detectThing = function (event) {
        unbindEvents();
        var color = $(this).css('background-color');
        if (color == "rgb(0, 128, 0)") {
            $('.mouse').removeClass('hidden');
        } else {
            $('.touch').removeClass('hidden');
        }
        $('.canary').on('click', bindEvents);
    }
    
    bindEvents();
    
});