Sign in / Sign up Tabs

<div class="nuda-authtabs is-signin">
  <div class="nuda-authtabs__head">
    <button class="is-active">Sign in</button>
    <button>Sign up</button>
    <span class="nuda-authtabs__pill"></span>
  </div>
  <div class="nuda-authtabs__body">
    <div>Email and password to log in</div>
  </div>
</div>

const root = document.querySelector('.nuda-authtabs');
const tabs = root.querySelectorAll('.nuda-authtabs__head button');

tabs.forEach((tab, i) => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => t.classList.remove('is-active'));
    tab.classList.add('is-active');
    root.classList.toggle('is-signup', i === 1);
    root.classList.toggle('is-signin', i === 0);
  });
});

.nuda-authtabs {
  padding: 6px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  width: 100%;
  max-width: 280px;
}

.nuda-authtabs__head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(0,0,0,.3);
  border-radius: 10px;
  padding: 4px;
}

.nuda-authtabs__head button {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  color: #a0a0a8;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 7px;
  transition: color .25s;
}

.nuda-authtabs__head button.is-active {
  color: #09090b;
}

.nuda-authtabs__pill {
  position: absolute;
  left: 4px;
  top: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #e4ff54;
  border-radius: 7px;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 4px 12px -4px rgba(228,255,84,.5);
}

.nuda-authtabs.is-signup .nuda-authtabs__pill {
  transform: translateX(100%);
}

.nuda-authtabs__body {
  padding: 14px 6px 6px;
  color: #a0a0a8;
  font-size: 12px;
}

.nuda-authtabs__body div {
  animation: _tabFade .35s ease both;
}

@keyframes _tabFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}