JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<button id="target">Target</button>

<button id="toggle">
Select other button
</button>

CSS

button#target {
  border: solid 2px red;
  border-radius: 10px;
  display:block;
}

button#target.selected::after {
  border: solid 4px green;
  border-radius: inherit;
  position: absolute;
    display: block;
    height: calc(100%);
    width: calc(100%);
}

JavaScript

document.querySelector('#toggle').addEventListener('click', () => {
	const target = document.querySelector('#target');
  console.log(target.classList)
	if (target.classList.contains('selected')) {
		target.classList.remove('selected');
	} else {
		target.classList.add('selected');
	}
})