JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/20.0.0/jssor.slider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/20.0.0/jssor.slider.mini.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/20.0.0/jssor.slider.debug.js"></script>
<div class="gridOuter row">
                    <a href="" class="home-block-button">
                    <div class="gridInner first col-xs-12 col-sm-4">
                        <h2>Domain 1</h2>
                        <p>Blurb</p>
                    </div>
                    </a>
                    <a href="" class="home-block-button">
                        <div class="gridInner col-xs-12 col-sm-4">
                            <h2>Domain 2</h2>
                            <p>Bkurb 2</p>
                        </div>
                    </a>
                    <a href="" class="home-block-button">
                        <div class="gridInner last col-xs-12 col-sm-4">
                            <h2>Domain 3</h2>
                            <p>Blurb 3</p>
                        </div>
                    </a>
                </div>

JavaScript

$('.home-block-button').on('mouseover', function() {
    $(this).find('.gridInner').css({'background-color':'#302f52'});
    $(this).find('.gridInner > h2').css({'color':'#fff'});
});