JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<div class="ssTokenEditor" contenteditable="true">
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent odio orci, pulvinar sit amet commodo vitae, tempor eu risus. Aenean lobortis diam quis mi elementum mattis. <span class="ssToken" contenteditable="false" data-token="entriesPerContestant">Morbi cursus</span> velit nec nibh porta aliquam. Nulla fringilla mi urna, et cursus turpis tristique eu. Mauris semper dolor condimentum lectus convallis facilisis. Sed sed cursus augue. Nam sodales condimentum odio, ut eleifend sem. Sed aliquet et urna eget dictum. Nunc id malesuada felis. Quisque suscipit, orci a adipiscing consequat, <span class="ssToken" contenteditable="false" data-token="organizationName">orci ligula tincidunt enim</span>, non condimentum risus sapien a dolor. Nam imperdiet ultrices erat et viverra.</p>
    
    <p>Donec blandit rutrum consectetur. Curabitur vel molestie mauris. Sed ut velit tincidunt, fermentum massa sit amet, consectetur nunc. Sed a odio metus. Praesent suscipit arcu in turpis ultrices, non faucibus ligula fringilla. Praesent accumsan nisi pellentesque ullamcorper convallis. Sed vehicula lacus massa, id condimentum tortor elementum sed. Donec suscipit, felis et mollis tincidunt, libero enim eleifend eros, eget auctor nulla elit vel ligula. Nulla luctus turpis ut diam placerat tristique. Sed nec tortor velit.</p>
    
    <p>Donec vitae nisl ante. Nullam at tellus eros. Cras neque justo, iaculis vitae tincidunt ut, cursus in nisl. Donec ut commodo erat, eu feugiat ligula. Donec blandit nibh at nunc varius tempor. Suspendisse potenti. Suspendisse venenatis lectus molestie ante eleifend rutrum. Nam vulputate dapibus posuere. Morbi et odio non erat eleifend sodales. Donec consequat rutrum tortor, id rhoncus lacus dapibus non.</p>
    
    <p>Maecenas feugiat et felis imperdiet tincidunt. Ut suscipit lorem id malesuada dignissim. Donec venenatis nec augue ultricies elementum. Maecenas tincidunt metus sed quam...

SCSS

.ssToken[contenteditable="false"] {
    background: #dde;
    border: 1px solid #cce;
    border-radius: 3px;
    padding: 0.2em;
    
    .ssRemoveToken {
        font-size: 0.8em;
        margin: 0.2em 0.2em 0.2em 0.7em;
        cursor: pointer;
        
        &:hover {
            color: red;
        }
    }
}
.ssTokenEditor {
    border: 1px solid #888;
    padding: 0.5em 1em;
    margin: 2em;
    font-family: sans-serif;
    height: 20em;
    overflow-y: scroll;
}

JavaScript

$('.ssToken[contenteditable="false"]')
    .on('click', '.ssRemoveToken', function() {
        $(this).parents('.ssToken').remove();
    })
    .append('<span class="ssRemoveToken">✕</span>')
;