Floating Bottom Nav

<div class="nuda-navx-floatnav" role="navigation" aria-label="Bottom navigation">
  <a class="nuda-navx-floatnav__item nuda-navx-floatnav__item--active" href="#" aria-current="page">
    <svg class="nuda-navx-floatnav__ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
      <polyline points="9 22 9 12 15 12 15 22"/>
    </svg>
    <span class="nuda-navx-floatnav__label">Home</span>
  </a>
  <a class="nuda-navx-floatnav__item" href="#">
    <svg class="nuda-navx-floatnav__ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
    </svg>
    <span class="nuda-navx-floatnav__label">Search</span>
  </a>
  <a class="nuda-navx-floatnav__item nuda-navx-floatnav__item--center" href="#">
    <svg class="nuda-navx-floatnav__ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
    </svg>
  </a>
  <a class="nuda-navx-floatnav__item" href="#">
    <svg class="nuda-navx-floatnav__ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
    </svg>
    <span class="nuda-navx-floatnav__label">Likes</span>
  </a>
  <a class="nuda-navx-floatnav__item" href="#">
    <svg class="nuda-navx-floatnav__ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/>
    </svg>
    <span class="nuda-navx-floatnav__label">Profile</span>
  </a>
</div>

.nuda-navx-floatnav {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: .5rem .75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  animation: _nuda-navxfloat-in .45s cubic-bezier(.34,1.56,.64,1);
}

.nuda-navx-floatnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #555;
  text-decoration: none;
  padding: .4rem .75rem;
  border-radius: 12px;
  transition: color .2s,background .2s;
  position: relative;
}

.nuda-navx-floatnav__item:hover {
  color: #cfcfcf;
  background: rgba(255,255,255,.06);
}

.nuda-navx-floatnav__item--active {
  color: #e4ff54;
}

.nuda-navx-floatnav__item--active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e4ff54;
}

.nuda-navx-floatnav__item--center {
  background: #e4ff54;
  color: #0a0a0a;
  border-radius: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0 .25rem;
}

.nuda-navx-floatnav__item--center:hover {
  background: #d8f240;
  color: #0a0a0a;
}

.nuda-navx-floatnav__ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.nuda-navx-floatnav__label {
  font-size: .6rem;
  font-weight: 500;
  line-height: 1;
}

@keyframes _nuda-navxfloat-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-navx-floatnav {
    animation: none;
  }
  .nuda-navx-floatnav__item {
    transition: none;
  }
}