No Notifications

<div class="nuda-empnotif">
  <div class="nuda-empnotif__bell">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9" />
      <path d="M13.7 21a2 2 0 01-3.4 0" />
    </svg>
    <span class="nuda-empnotif__zen">Z</span>
  </div>
  <div class="nuda-empnotif__title">All caught up</div>
  <div class="nuda-empnotif__sub">No new notifications</div>
</div>

.nuda-empnotif {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  text-align: center;
  width: 100%;
  max-width: 220px;
}

.nuda-empnotif__bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: #63636e;
  margin-bottom: 10px;
}

.nuda-empnotif__bell svg {
  width: 32px;
  height: 32px;
}

.nuda-empnotif__zen {
  position: absolute;
  top: 0;
  right: 8px;
  color: #e4ff54;
  font-size: 18px;
  font-style: italic;
  font-family: Georgia,serif;
  font-weight: 700;
  animation: _zenFloat 2.4s ease-in-out infinite;
}

.nuda-empnotif__title {
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;
}

.nuda-empnotif__sub {
  color: #a0a0a8;
  font-size: 11px;
  margin-top: 2px;
}

@keyframes _zenFloat {
  0%,100% {
    transform: translateY(0);
    opacity: .7;
  }
  50% {
    transform: translateY(-6px) rotate(10deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-empnotif__zen {
    animation: none;
  }
}