JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider" class="yellow">    
    <div class="yellow_back wrap">
        <div id="slide" class="slide_wrap">
        
            <h1>Fiduciary services</h1>
            <p>Corporate services provided by a leading licensed Fiduciary Services<br />
            Provider, operating under the supervision of our Central Bank, offer-<br />
            ing the establishment and professional daily<br />
            management of gaming and lottery companies</p>
            
            <a href="./" class="button"><span>Click here for more information..</span></a>
        </div>
    </div>
</div>


<div id="slider" class="green">
    <div class="green_back wrap">
        <div id="slide" class="slide_wrap">
        
            <h1>Fiduciary services</h1>
            <p>Corporate services provided by a leading licensed Fiduciary Services<br />
            Provider, operating under the supervision of our Central Bank, offer-<br />
            ing the establishment and professional daily<br />
            management of gaming and lottery companies</p>
            
            <a href="./" class="button">Click here for more information..</a>
        </div>
    </div>
</div>

<div id="slider" class="blue">
    <div class="blue_back wrap">
        
        <div id="slide" class="slide_wrap">
        
            <h1>Fiduciary services</h1>
            <p>Corporate services provided by a leading licensed Fiduciary Services<br />
            Provider, operating under the supervision of our Central Bank, offer-<br />
            ing the establishment and professional daily<br />
            management of gaming and lottery companies</p>
            
            <a href="./" class="button">Click here for more information..</a>
        </div>
    </div>
</div>

<div id="slider" class="orange">
    <div class="orange_back wrap">
        
        <div id="slide" class="slide_wrap">
        
            <h1>Fiduciary services</h1>
            <p>Corporate services provided by a...

CSS

.yellow,
.y_active{
    background-color:yellow;
}

.green,
.g_active{
    background-color:green;
}

.blue,
.b_active{
    background-color:blue;
}

.orange,
.o_active{
    background-color:orange;
}

li{
    padding:10px;
    float:left;
}

JavaScript

jQuery(document).ready(function() {

    $('.green, .blue, .orange').hide();

    $('.y_active, .yellow').hover(
    function() {
        $('.yellow').show();
        $('.green').hide();
        $('.blue').hide();
        $('.orange').hide();
    }, function() {
        $('.yellow').hide();
    });

    $('.g_active, .green').hover(function() {
        $('.green').toggle();
        $('.yellow').hide();
        $('.blue').hide();
        $('.orange').hide();
    });

    $('.b_active, .blue').hover(function() {
        $('.blue').toggle();
        $('.yellow').hide();
        $('.green').hide();
        $('.orange').hide();
    });

    $('.o_active, .orange').hover(function() {
        $('.orange').toggle();
        $('.yellow').hide();
        $('.blue').hide();
        $('.green').hide();
    });

});