JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header section-secondary"></div>
    
    <div class="main">
        <div class="col-main section-primary"></div>
        <div class="sidebar section-secondary"></div>
    </div>
</div>

CSS

.header {
    height: 50px;
    margin-bottom: 20px;
    
    background: red;
}

.main {}
.main:after {
    clear: both;
    
    content: '';
}

    .col-main,
    .sidebar {
        height: 300px;
    }

    .col-main {
        float: left;
        width: 60%;
        background: green;
    }

    .sidebar {
        float: right;
        width: 30%;
    
        background: grey;
    }

.section-primary {}
.section-secondary {
    opacity: 0.5;
}

JavaScript

jQuery(document).ready(function ($) {
    $(".section-secondary")
    .on("mouseenter", function(e){
        $(e.target).animate({ opacity: 1 });
        $(".section-primary").animate({ opacity: 0.5 });
    })
    .on("mouseleave", function(e){
        $(e.target).animate({ opacity: 0.5 });
        $(".section-primary").animate({ opacity: 1 });
    });
});