all

<span className="px-2.5 py-0.5 rounded-full border bg-emerald-500/10 text-emerald-500 border-emerald-500/20 text-[10px] font-black uppercase tracking-widest">
  Active
</span>

<div className="flex flex-col p-4 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 w-full">
  <div className="flex items-center gap-3 mb-1">
    <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
    <h4 className="text-sm font-black uppercase tracking-widest">Update Successful</h4>
  </div>
  <p className="text-xs font-medium text-emerald-500/80 leading-relaxed ml-5">
    Your profile has been saved successfully.
  </p>
</div>

<div className="flex flex-col p-4 rounded-2xl bg-destructive/10 border border-destructive/20 text-destructive w-full">
  <div className="flex items-center gap-3 mb-1">
    <div className="w-2 h-2 rounded-full bg-destructive animate-pulse"></div>
    <h4 className="text-sm font-black uppercase tracking-widest">Submission Failed</h4>
  </div>
  <p className="text-xs font-medium text-destructive/80 leading-relaxed ml-5">
    Please check your network connection.
  </p>
</div>

<div className="fixed bottom-8 right-8 z-[100] flex items-center gap-4 px-6 py-4 bg-card border border-border rounded-2xl shadow-2xl">
  <div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
    <Info className="w-4 h-4" />
  </div>
  <p className="text-sm font-bold text-foreground">Settings saved successfully!</p>
  <button className="ml-2 text-muted-foreground hover:text-foreground transition-colors">
    <X className="w-4 h-4" />
  </button>
</div>