JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="highlight-ctnr">
     <h1>This heading will be highlighted</h1>

</div>
<button>This button will trigger the highlight</button>

CSS

.highlight-ctnr {
    margin-bottom: 30px;
    padding: 0 20px;
    border: #ccc 1px solid;
    border-radius: 4px;
}
.highlight {
    -moz-animation: highlight 0.3s ease 0s 1 alternate ;
    -webkit-animation: highlight 0.3s ease 0s 1 alternate;
    animation: highlight 0.3s ease 0s 1 alternate;
}

button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}
@-webkit-keyframes highlight {
    from { background-color: #5a8cced4;}
    to {background-color: white;}
}
}
@-moz-keyframes highlight {
    from { background-color: #5a8cced4;}
    to {background-color: white;}
}
@-keyframes highlight {
    from { background-color: #5a8cced4;}
    to {background-color: white;}
}

JavaScript

$(function () {
    $("button").click(function () {
        let el = $(this);
        el.siblings(".highlight-ctnr").addClass("highlight");
        setTimeout(function () { 
        	el.siblings(".highlight-ctnr").removeClass("highlight");
        }, 300);
    });
});