JSFiddle - React, Tailwind, and code Playground

HTML

<div class="version-card" style="padding:30px;border:2px solid black;">
<div class="card-content">
<h1>
 header
</h1>
<p>
 blah blah blah
</p>
<a class="button-primary" style="padding:20px; background:green;" id="button-primary">Button</a>
</div>
</div>

<div class="version-card" style="padding:30px;border:2px solid black;">
<div class="card-content">
<h1>
 header
</h1>
<p>
 blah blah blah
</p>
<a class="button-primary" style="padding:20px; background:green;" id="button-primary">Button</a>
</div>
</div>

<div class="version-card" style="padding:30px;border:2px solid black;">
<div class="card-content">
<h1>
 header
</h1>
<p>
 blah blah blah
</p>
<a class="button-primary" id="button-primary" style="padding:20px; background:green;">Button</a>
</div>
</div>

CSS

.active {
  background:red!important;
}

JavaScript

document.querySelectorAll(".version-card").addEventListener("mouseover", mouseOver);
document.querySelectorAll(".version-card").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById(".button-primary").classList.add("active");

}

function mouseOut() {
  document.getElementById(".button-primary").classList.remove("active");

}