Empty Cart

<div class="nuda-empcart">
  <div class="nuda-empcart__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="9" cy="21" r="1" />
      <circle cx="20" cy="21" r="1" />
      <path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6" />
    </svg>
    <span class="nuda-empcart__qmark">?</span>
  </div>
  <div class="nuda-empcart__title">Your cart is empty</div>
  <button class="nuda-empcart__cta">Browse products</button>
</div>

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

.nuda-empcart__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: #63636e;
  margin-bottom: 10px;
  animation: _cartTilt 4s ease-in-out infinite;
}

.nuda-empcart__icon svg {
  width: 36px;
  height: 36px;
}

.nuda-empcart__qmark {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e4ff54;
  color: #09090b;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-empcart__title {
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.nuda-empcart__cta {
  padding: 7px 14px;
  background: #e4ff54;
  color: #09090b;
  border: 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s,filter .2s;
}

.nuda-empcart__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

@keyframes _cartTilt {
  0%,100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

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