JSFiddle - React, Tailwind, and code Playground

by ShimShamSam

HTML

<h1 class='title'></h1>
<div class="bars">
		<div class="bar1"></div>
		<div class="bar2"></div>
		<div class="bar3"></div>
		<div class="bar4"></div>
</div>

CSS

.bars div {
    width: 1000px;
    height: 20px;
    color: slateblue;
    margin: 10px;
    background-color: lightblue;
}

.bars .green {
    background-color: darkolivegreen;
}
.bars .red {
    background-color: lightcoral;
}
.bars .violet {
    background-color: violet;
}
.bars .brown {
    background-color: sandybrown;
}

JavaScript

$(document).ready(function() {
    'use strict';
        
    $('.bar1').hover(function() {
        $(this).toggleClass('green');
    });

    $('.bar2').hover(function() {
        $(this).toggleClass('red');
    });

    $('.bar3').hover(function() {
        $(this).toggleClass('violet');
    });

    $('.bar4').hover(function() {
        $(this).toggleClass('brown');
    });
});