JSFiddle - React, Tailwind, and code Playground

by Mario Perez

HTML

<body>
        <div id="title" class="highlighted">I'm highlighted!</div>
        <div id="text">Highlight me, too!</div>
	</body>

CSS

#title {
    background-color: #C02942;
    border-radius: 5px;
    text-align: center;
    font-family: Verdana, Arial, Sans-Serif;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

#text {
    background-color: #0B486B;
    border-radius: 5px;
    text-align: center;
    font-family: Vivaldi, Cursive;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}

JavaScript

$(document).ready(function() {
    $('#text').click(function() {
        $(this).addClass('highlighted');
    });
});