No Results State

<div class="nuda-nores">
  <div class="nuda-nores__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="7" />
      <path d="m21 21-4.3-4.3" />
      <path d="M8 11h6" class="nuda-nores__line" />
    </svg>
  </div>
  <div class="nuda-nores__title">No results for "quantum"</div>
  <div class="nuda-nores__sub">Try a broader query or check spelling</div>
</div>

.nuda-nores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 12px;
  text-align: center;
  width: 100%;
  max-width: 240px;
  animation: _norIn .5s cubic-bezier(.16,1,.3,1) both;
}

.nuda-nores__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: #63636e;
  margin-bottom: 4px;
  animation: _norFloat 3s ease-in-out infinite;
}

.nuda-nores__icon svg {
  width: 22px;
  height: 22px;
}

.nuda-nores__line {
  stroke-dasharray: 6;
  stroke-dashoffset: 6;
  animation: _norDraw .8s ease forwards .4s;
}

.nuda-nores__title {
  color: #fafafa;
  font-size: 12px;
  font-weight: 600;
}

.nuda-nores__sub {
  color: #63636e;
  font-size: 11px;
}

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

@keyframes _norFloat {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

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

@media (prefers-reduced-motion:reduce) {
  .nuda-nores,.nuda-nores__icon {
    animation: none;
  }
  .nuda-nores__line {
    stroke-dashoffset: 0;
    animation: none;
  }
}