JSFiddle - React, Tailwind, and code Playground

HTML

<div class="active">
Home
</div>

<div>
Sleep
</div>

CSS

body {
  background-color: #eee;
}
div {
  display: inline-block;
  padding: 8px;
  margin: 2rem;
  border-radius: 8px;
  outline: 1px solid #0000;
  transition: box-shadow linear 200ms,
    outline-color linear 200ms,
    background linear 200ms,
    font-size linear 200ms;
}
div:not(.active) {
  outline: 1px solid rgba(0, 0, 0, 0.02);
  box-shadow: 1px 1px 4px #0002;
}
div.active {
  background-image: radial-gradient(farthest-corner at left top, #fff 0, #eee 50%);
  box-shadow: 0 0 8px rgba(255, 255, 255, .9),
    -8px -8px 16px rgba(255, 255, 255, 1),
    8px 8px 24px rgba(0, 0, 0, .2);
  font-size: 101%;
}

JavaScript

for (const el of document.querySelectorAll('div')) {
	el.addEventListener('click', () => {
  	el.classList.toggle('active')
  })
}