JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Sample">
                        <div class="Dummy">
                            <div class="Books">
                                
                                        <a class="single-dummy"  style="width: 14%; margin-left: 1%; margin-right: 1%;">DUMMY 1</a>
                                    
                                       <a style="width: 14%; margin-left: 1%; margin-right: 1%;">SAMPLE 1</a>
                                    
                            </div>
                        </div>
                        <div class="Dummy">
                            <div class="Prices">
                                <img src="https://www.lexis.se/wp-content/uploads/2022/01/ARD28940SS-scaled.jpg">
                                
                                        <a class="single-dummy" style="width: 14%; margin-left: 1%; margin-right: 1%;" class="">
                                           DUMMY 2
                                    
                                        <a style="width: 14%; margin-left: 1%; margin-right: 1%;" class="">
                                            SAMPLE 2
                                   
                                    
                            </div>
                        </div>
                    </div>

CSS

.grid-highlight {
    margin-bottom: 5px
}

.grid-highlight [class^="grid_"] {
    line-height: 30px;
    text-align: center;
    background-color:#fff
}

body {
    margin: 40px 0 20px 0;
    background-color: #fff;
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: 300;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover
}

form {
    margin: 0;
    padding: 0;
    display:block
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto";
    font-weight:700
}

h1 {
    font-size: 36px;
    margin-bottom:15px
}

h2 {
    font-size: 30px;
    margin-bottom:8px
}

h3 {
    font-size: 24px;
    margin-bottom:8px
}

h4 {
    font-size: 18px;
    margin-bottom: 8px;
    text-transform: uppercase;
    color:#4189a1
}

h5 {
    font-size: 14px;
    margin-bottom:8px
}

h6 {
    font-size: 12px;
    margin-bottom:8px
}

.pointer {
    cursor:pointer
}

i {
    font-style:italic
}

strong, b {
    font-weight:700
}

a:link:not(.btn), a:visited:not(.btn) {
    color:#333
}

a:hover:not(.btn), a:active:not(.btn) {
    color:#2a6b7f
}

.btn.outline {
    color: #2a6b7f;
    background-color: transparent;
    border: 1px solid #2a6b7f;
    text-transform: uppercase;
    font-weight:700
}

.btn.blue {
    background-color: #5fcced;
    border-color:#5fcced
}

.btn.blue:hover {
    background-color:#4189a1
}

.btn.block {
    text-align:center
}

.AlignRight {
    text-align:right
}

.SearchBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    display:none
}

.Form {
    padding: 10px;
    background-color:#f7f7f7
}

.Form.Locked input[type=text] {
    background-color: #fefefe;
    border-color:transparent
}

.ActorCount + .ActorCount:before {
    content: ', '
}

th.hide-mobile, td.hide-mobile {
    display:table-cell !important
}

fieldset.buy label {
    font-weight: bold;
    text-transform: uppercase;
    color: #4189a1;
 ...

JavaScript

$('.single-dummy').hover(
  function(){ 
    $('.single-dummy').addClass("active");
  },
  function() {
    $('.single-dummy').removeClass("active");
  }
);