JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<style>
.tagger1010 span
{
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
user-select: none;
border: 1px solid BBD0CD;
}
.tagger1010 span.is-active {
background-color: #008fde;
color: #ffffff;
}
.tagger1010 span:hover {
background-color: #008fde;
color: #ffffff;
}
</style>
<body>
<div class="tagger1010">
<span>Google</span>
<span>Microsoft</span>
<span>Facebook</span>
<span>LinkedIn</span>
</div>
<div class="as-console-wrapper"></div>
<div class="as-console"></div>
</body>
</html>
JavaScript
const changeColor = (evt) => {
if (evt.currentTarget.classList.contains("is-active")){
evt.currentTarget.classList.remove("is-active");
localStorage.removeItem(evt.currentTarget.textContent);
} else {
evt.currentTarget.classList.add("is-active");
localStorage.setItem(evt.currentTarget.textContent,'true');
}
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => {
console.log('EL',EL)
if(localStorage.getItem(EL.textContent)){
EL.classList.add("is-active");
}
EL.addEventListener("click", changeColor);
});