JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cursor-wait">
    <a href="#">wait</a>
    <div class="no-pointer-events">
        <a href="#">wait > no events</a>
    </div>
</div>

<br />

<div class="no-pointer-events">
    <a href="#">no events</a>
    <div class="cursor-wait">
        <a href="#">no events > wait</a>
    </div>
</div>

<br />

<div class="cursor-wait no-pointer-events">
    <a href="#">no events + wait</a>
</div>

<br />

<div class="cursor-default">
    <a href="#">no events + wait</a>
</div>

CSS

/** Disable Pointer events */
.no-pointer-events
{
    pointer-events: none;
}

/** Set Cursor */
.cursor-wait
{
    cursor: wait !important;
}

.cursor-default
{
   pointer-events: fill;
}

/** Emphasize active anchor */
a:active
{
    background: black;
}
a:hover
{
    background: gray;
}

JavaScript

/**
 * Test cases to use both Pointer-Events
 * and Cursor in CSS.
 *
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
 */