JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div class="editable">
<span class="reusable" data-reusable-value="This is a reusable">blah</span> This is not
</div>

CSS

.reusable::after {
 content: attr(data-reusable-value)   
}

.reusable:hover::after {
 color:red;   
}

.editable:hover .reusable::after {
 background:yellow;   
}

JavaScript

$(".editable").on('click', '*', function(e){
    console.log(e);
});