JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">inline link</a>

<hr>

<a href="#" style="display: inline-block">inline-block link</a>

<hr>

<a href="#" style="display: block">block link</a>

<hr>

<a href="#" style="display: table">table link</a>

<hr>

<a href="#" style="display: table-cell">table-cell link</a>

<hr>

<a href="#" style="display: flex">flex link</a>

<hr>

<a href="#" style="display: inline-flex">inline-flex link</a>

CSS

a {
  pointer-events: none;
}
a:hover {
  color: red
}