JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<div class="container stage">
<div class="container">
    <div class="tabbar tab-style1">
      <ul class="flex-center">
        <li class="home active" data-where="home"><span class="material-icons-outlined">
            home
          </span></li>
        <li class="products" data-where="products"><span class="material-icons-outlined">
            shopping_bag
          </span></li>
        <li class="services" data-where="services"><span class="material-icons-outlined">
            plumbing
          </span></li>
        <li class="about" data-where="about"><span class="material-icons-outlined">
            business
          </span></li>
        <li class="help" data-where="help"><span class="material-icons-outlined">
            help_outline
          </span></li>
        <li class="follow">&nbsp;</li>
      </ul>
    </div>
    </div>
    </div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined");
.flex-center {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container {
  padding: 1rem 1rem 1.5rem;
}

.stage {
  max-width: 400px;
  width: 400px;
  margin: 1rem auto 2rem;
}

.home.active {
  color: var(--accent-color);
}
.home-style {
  --app-content-background-color: #c0d8ec;
}

.products.active {
  --outset-shadow: rgba(247, 167, 103, 0.45);
  --inset-shadow: rgba(149, 62, 8, 0.45);
  --clay-box-shadow: rgba(211, 69, 20, 0.4);
  --clay-background-color: #d34514;
  --clay-fg-color: #f1f2f3;
  color: #690c0c;
}
.products-style {
  --app-content-background-color: #d36e5a;
}

.services.active {
  --outset-shadow: rgba(255, 159, 40, 0.45);
  --inset-shadow: rgba(88, 54, 13, 0.45);
  --clay-box-shadow: rgba(88, 54, 13, 0.4);
  --clay-background-color: #ed9426;
  --clay-fg-color: #f1f2f3;
  color: #cf5c0f;
}
.services-style {
  --app-content-background-color: #ed9426;
}

.about.active {
  --outset-shadow: rgba(93, 255, 85, 0.45);
  --inset-shadow: rgba(28, 78, 26, 0.45);
  --clay-box-shadow: rgba(28, 78, 26, 0.4);
  --clay-background-color: #4dd146;
  --clay-fg-color: #f1f2f3;
  color: #4dd146;
}
.about-style {
  --app-content-background-color: #4dd146;
}

.help.active {
  --outset-shadow: rgba(230, 230, 230, 0.45);
  --inset-shadow: rgba(81, 81, 81, 0.45);
  --clay-box-shadow: rgba(81, 81, 81, 0.4);
  --clay-background-color: #a3a3a3;
  --clay-fg-color: #f1f2f3;
  color: #783896;
}
.help-style {
  --app-content-background-color: #a3a3a3;
}

.tabbar {
  background-color: var(--app-content-background-color);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  height: 120px;
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  transition:...

JavaScript

const uls = document.querySelectorAll("ul");

uls.forEach((ul) => {
  const resetClass = ul.parentNode.getAttribute("class");
  const lis = ul.querySelectorAll("li");

  lis.forEach((li) => {
    li.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();
      const target = e.currentTarget;

      if (
        target.classList.contains("active") ||
        target.classList.contains("follow")
      ) {
        return;
      }

      ul.parentNode.setAttribute(
        "class",
        `${resetClass} ${target.getAttribute("data-where")}-style`
      );

      lis.forEach((item) => clearClass(item, "active"));

      setClass(target, "active");
    });
  });
});

function clearClass(node, className) {
  node.classList.remove(className);
}

function setClass(node, className) {
  node.classList.add(className);
}