JSFiddle - React, Tailwind, and code Playground

HTML

<p>Hey so you'll see that despite disabling pointer-events on a parent fails in an unusual way in that child-elements allowing hover causes parent-elements to take hover also.</p>

<div class="first">
    <p><a href="/">One</a></p>
    <p><a href="/">Two</a></p>
</div>

<p>The <em>above</em> box will only enter transition if a child-element is hovered directly. The <em>below</em> box will transition if either a child or the box itself is hovered.</p>

<div class="second">
    <p><a href="/">Three</a></p>
    <p><a href="/">Four</a></p>
</div>

CSS

body {
			padding-left: 1em;
			padding-top: 0;
		}
	
		p {
			width: 65%;
		}
	
		div {
			background: rgb(127,127,127);
			-webkit-transition: background 1s;
			width: 10%;
			border-radius: 10px;
			padding-left: .6em;
		}
		
		div.first {
			pointer-events: none;
		}
		
		div:hover {
		    background: red;
		}
		
		a {
			pointer-events: all;
			font-family: "Arial Rounded MT Bold", sans-serif;
			font-weight: bold;
			text-decoration: none;
			color: inherit;
		}
		
		a:hover {
			color: white;
		}