Shake Error Alert

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="error-alert">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
    <circle cx="12" cy="12" r="9"/>
    <path d="M12 8v5M12 16h.01" stroke-linecap="round"/>
  </svg>
  <span>Incorrect email or password. Please try again.</span>
</div>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.error-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 300px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  animation: error-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97), error-glow 1.8s ease-in-out infinite;
}
.error-alert svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #ef4444;
}
@keyframes error-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@keyframes error-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}