Verify Email

<div class="nuda-verify is-success">
  <div class="nuda-verify__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
      <path class="nuda-verify__check" d="M5 13l4 4L19 7" />
    </svg>
  </div>
  <div class="nuda-verify__body">
    <div class="nuda-verify__title">Email verified</div>
    <div class="nuda-verify__sub">you@nudaui.dev is good to go</div>
  </div>
</div>

.nuda-verify {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(110,231,183,.06);
  border: 1px solid rgba(110,231,183,.2);
  border-radius: 12px;
  width: 100%;
  max-width: 300px;
  animation: _verifyIn .55s cubic-bezier(.16,1,.3,1) both;
}

.nuda-verify__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(110,231,183,.18);
  color: #6ee7b7;
  flex-shrink: 0;
  animation: _verifyPop .6s cubic-bezier(.16,1,.3,1) .2s both;
}

.nuda-verify__icon svg {
  width: 18px;
  height: 18px;
}

.nuda-verify__check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: _verifyDraw .55s ease forwards .55s;
}

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

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

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

@keyframes _verifyPop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes _verifyDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-verify,.nuda-verify__icon {
    animation: none;
  }
  .nuda-verify__check {
    stroke-dashoffset: 0;
    animation: none;
  }
}