JSFiddle - React, Tailwind, and code Playground

by neo108

HTML

<div id="boxes">
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>
</div>
<div id="box4">box4</div>
</div>

CSS

#boxes {
    float: left;
    display: inline;
}
#box1 {
    width:50px;
    padding:10px;
    border:1px solid gray;
    margin:0px;
    height: 20px;
}
#box2 {
    width:50px;
    padding:10px;
    border:1px solid gray;
    margin:0px;
    height: 20px;
}
#box3 {
    width:50px;
    padding:10px;
    border:1px solid gray;
    margin:0px;
    height: 20px;
}
#box4 {
    display: inline-block;
    width:150px;
    padding:10px;
    border:1px solid gray;
    height: 100px;
}

JavaScript

$(document).ready(function(){
    // box 1
    $('#box1').mouseover(function(){
        $('#box1').css('background-color', '#F7FE2E');
        $('#box4').css('background-color', '#F7FE2E');
    });
    $('#box1').mouseout(function(){
        $('#box1').css('background-color', '#FFF');
        $('#box4').css('background-color', '#FFF');
    });
    
    // box 2
    $('#box2').mouseover(function(){
        $('#box2').css('background-color', '#F6CEE3');
        $('#box4').css('background-color', '#F6CEE3');
    });
    $('#box2').mouseout(function(){
        $('#box2').css('background-color', '#FFF');
        $('#box4').css('background-color', '#FFF');
    });
    
    // box 3
    $('#box3').mouseover(function(){
        $('#box3').css('background-color', '#81F7BE');
        $('#box4').css('background-color', '#81F7BE');
    });
    $('#box3').mouseout(function(){
        $('#box3').css('background-color', '#FFF');
        $('#box4').css('background-color', '#FFF');
    });
});