JSFiddle - React, Tailwind, and code Playground

HTML

<aside>
  <div class="item">A</div>
  <div class="item">B</div>
</aside>

CSS

aside {
  display: flex;
  gap: 20px;
}

.item {
  height: 20px;
  width: 20px;
  border: 1px solid black;
  text-align: center;
  background: green;
  color: white;
}

.fade-class {
  animation: fadeAway 1s ease-out;
}

@keyframes fadeAway {
  from {
    background: orange;
  }

  to {
    background: green;
  }
}

JavaScript

const items = document.querySelectorAll(".item");

const fadeEffect = (item) => {
  item.classList.add("fade-class");

  const timer = setTimeout(() => {
    clearTimeout(timer);
    item.classList.remove("fade-class");
  }, 1000);
}

items.forEach(it => {
  it.addEventListener("click", () => fadeEffect(it));
});