JSFiddle - React, Tailwind, and code Playground

HTML

<div class='unlock'>UNLOCKED</div>

CSS

.lock{
    color: red;
}
.unlock{
    color: green;
}
.lock:hover{
    cursor: pointer;
}
.unlock:hover{
    cursor: pointer;
}

JavaScript

$('.unlock').click(function(){
    $(this).removeClass('unlock').addClass('lock').text('LOCKED');
});
$('.lock').click(function(){
    $(this).removeClass('lock');
});