JSFiddle - React, Tailwind, and code Playground

HTML

<p>You might expect links to work even if they don't light up when pointer-events are disabled, but apparently they just break entirely.</p>

<div class="first">
    <p><a href="/">Unclickable 1</a></p>
    <p><a href="/">Unclickable 2</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: 12em;
			border-radius: 10px;
			padding-left: .6em;
		}
		
		div.first {
			pointer-events: none;
		}
		
		div:hover {
		    background: red;
		}
		
		a {
		    color: inherit;
			font-family: "Arial Rounded MT Bold", sans-serif;
			font-weight: bold;
			text-decoration: none;
		}
		
		a:hover {
			color: white;
		}