JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

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

</div>
<button>This button will trigger the highlight</button>
<p><strong>Note:</strong> Click on "Start Over" button in order to remove the class that triggers the highlight.</p>
<hr>
<button class="clear">Start Over</button>

CSS

.highlight-ctnr {
    margin-bottom: 30px;
    padding: 0 20px;
    border: #ccc 1px solid;
    border-radius: 4px;
}
.highlight {
    -moz-animation: highlight 2s ease 0s 1 alternate ;
    -webkit-animation: highlight 2s ease 0s 1 alternate;
    animation: highlight 2s ease 0s 1 alternate;
}
body {
    text-align: center;
    font-family: Arial;
}
p { font-style: italic; }
hr { margin-top: 30px; }
button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}
@-webkit-keyframes highlight {
    from { background-color: #F6F6BC;}
    to {background-color: white;}
}
}
@-moz-keyframes highlight {
    from { background-color: #F6F6BC;}
    to {background-color: white;}
}
@-keyframes highlight {
    from { background-color: #F6F6BC;}
    to {background-color: white;}
}

JavaScript

$(function () {
    $("button").click(function () {
        $(this).siblings(".highlight-ctnr").toggleClass("highlight");
    });
    $(".clear").click(function () {
        $(this).siblings(".highlight-ctnr").removeClass("highlight");
    });
});