Gradient UI Kit

<button class="bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white rounded-xl px-4 py-2 text-sm font-bold hover:scale-105 shadow-lg shadow-purple-500/40 transition-all">
  Primary Button
</button>

<button class="bg-transparent text-white  rounded-xl px-4 py-2 text-sm font-bold transition-colors">
  Outline Button
</button>

<button class="w-10 h-10 flex items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  text-white shadow-lg shadow-purple-500/40 transition-colors" aria-label="Settings">
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
</button>

<button class="bg-gradient-to-r from-fuchsia-500 to-indigo-500 text-white rounded-full px-5 py-2.5 text-sm font-bold shadow-lg shadow-purple-500/40 transition-all">
  Get Started
</button>

<span class="inline-flex items-center gap-1.5 bg-gradient-to-r from-fuchsia-500 to-indigo-500 text-white rounded-full px-2.5 py-1 text-xs font-bold">
  <span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
  Active
</span>

<span class="relative inline-flex">
  <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  text-white/80">🔔</span>
  <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-r from-fuchsia-500 to-indigo-500 text-white text-[10px] font-bold">3</span>
</span>

<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  rounded-xl p-5 shadow-lg shadow-purple-500/40">
  <h3 class="text-sm font-bold text-white mb-1">Card Title</h3>
  <p class="text-xs text-white/80">A short description of this card's content goes here.</p>
</div>

<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  rounded-xl p-5 shadow-lg shadow-purple-500/40 flex items-center gap-4">
  <div class="w-12 h-12 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md flex items-center justify-center text-white text-sm font-bold">JD</div>
  <div>
    <p class="text-sm font-bold text-white">Jane Doe</p>
    <p class="text-xs text-white/80">Product Designer</p>
  </div>
</div>

<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  rounded-xl p-6 shadow-lg shadow-purple-500/40">
  <p class="text-xs font-bold text-white uppercase tracking-wide mb-2">Pro</p>
  <p class="text-2xl font-bold text-white mb-4">$19<span class="text-sm text-white/80">/mo</span></p>
  <button class="w-full bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white rounded-xl px-4 py-2 text-sm font-bold hover:scale-105 transition-all">
    Choose Plan
  </button>
</div>

<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  rounded-xl p-3 text-xs text-white shadow-lg shadow-purple-500/40">
  ℹ️ This is an informational message.
</div>

<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  rounded-xl p-3 text-xs text-white shadow-lg shadow-purple-500/40">
  ✅ Your changes have been saved.
</div>

<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  rounded-xl p-3 text-xs text-white shadow-lg shadow-purple-500/40">
  ⚠️ This action can't be undone.
</div>

<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  rounded-xl p-3 text-xs text-white shadow-lg shadow-purple-500/40">
  ⛔ Something went wrong.
</div>

<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-xl text-sm bg-white text-slate-900 placeholder:text-slate-400 ring-2 ring-purple-400 focus:outline-none" />

<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-xl text-sm bg-white text-slate-900 placeholder:text-slate-400 ring-2 ring-purple-400 focus:outline-none"></textarea>

<select class="w-48 px-3 py-2 rounded-xl text-sm bg-white text-slate-900 placeholder:text-slate-400 ring-2 ring-purple-400 focus:outline-none">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>

<label class="inline-flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 rounded text-fuchsia-600" />
  <span class="text-sm text-white">I agree to the terms</span>
</label>

<label class="inline-flex items-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="w-11 h-6 rounded-full bg-slate-200 peer-checked:bg-gradient-to-r peer-checked:from-fuchsia-500 peer-checked:to-indigo-500 transition-colors relative">
    <div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
  </div>
</label>

<div class="w-8 h-8 rounded-full border-4 border-purple-200 border-t-fuchsia-600 animate-spin"></div>

<div class="w-48 h-2.5 rounded-full bg-purple-100 overflow-hidden">
  <div class="h-full w-2/3 rounded-full bg-gradient-to-r from-fuchsia-500 to-indigo-500"></div>
</div>

<div class="w-48 space-y-2">
  <div class="h-4 w-3/4 rounded bg-purple-100"></div>
  <div class="h-4 w-1/2 rounded bg-purple-100"></div>
</div>

<button id="toast-trigger" class="bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white rounded-xl px-4 py-2 text-sm font-bold hover:scale-105 transition-all">
  Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-xl bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  text-white text-sm font-bold px-4 py-3 shadow-lg shadow-purple-500/40">
  ✅ Saved successfully!
</div>

<details class="w-48 rounded-xl  bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 p-4 group">
  <summary class="cursor-pointer text-sm font-bold text-white list-none flex items-center justify-between">
    Refund policy?
    <span class="text-white/80 group-open:rotate-180 transition-transform">▾</span>
  </summary>
  <p class="text-xs text-white/80 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>

<button id="modal-open" class="bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white rounded-xl px-4 py-2 text-sm font-bold hover:scale-105 transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-xl p-6 w-full max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  text-white backdrop:bg-black/50">
  <h3 class="text-sm font-bold mb-2">Confirm action</h3>
  <p class="text-xs text-white/80 mb-4">Are you sure you want to continue?</p>
  <div class="flex gap-2 justify-end">
    <button id="modal-close" class="px-3 py-1.5 rounded-xl text-xs font-bold text-white/80">Cancel</button>
    <button class="px-3 py-1.5 rounded-xl text-xs font-bold bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white">Confirm</button>
  </div>
</dialog>

<span class="relative inline-block group">
  <button class="w-8 h-8 flex items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  text-white text-xs font-bold">?</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-xl bg-gradient-to-r from-fuchsia-500 to-indigo-500 text-white text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>

<div class="w-10 h-10 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md flex items-center justify-center text-white text-sm font-bold">AB</div>

<div class="flex -space-x-2">
  <div class="w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md border-2 border-white flex items-center justify-center text-white text-xs font-bold">A</div>
  <div class="w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md border-2 border-white flex items-center justify-center text-white text-xs font-bold">B</div>
  <div class="w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md border-2 border-white flex items-center justify-center text-white text-xs font-bold">C</div>
  <div class="w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500  border-2 border-white flex items-center justify-center text-white/80 text-xs font-bold">+5</div>
</div>

<div class="relative inline-block">
  <div class="w-10 h-10 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md flex items-center justify-center text-white text-sm font-bold">JS</div>
  <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>