JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    <div id="advertisement">Advertisement!</div>
    <div id="content">Content!</div>
</div>
<div id="warning">You blocked ads! :(</div>

<button id="remove">Remove ads.</button>
<button id="check">Recheck ads.</button>

CSS

#page {
    display: block;
}

#warning {
    display: none;
}

JavaScript

function adblockCheck(event) {
    event.preventDefault();
    var visibleAds = $("#advertisement").is(":visible");
    
    $("#page").toggle( visibleAds );
    $("#warning").toggle( !visibleAds );
}

function adRemove(event) {
    event.preventDefault();
    $("#advertisement").hide();
}

$(document)
    // Check ads on ready
    .on( 'ready', adblockCheck )
    // Check ads on button click
    .on( 'click', "#check", adblockCheck )
    // Remove adds on request
    .on( 'click', "#remove", adRemove );