Glassmorphic Crypto Swap Card

<div class="glass border-white/10 border rounded-2xl mt-3 px-4 py-4">
                <div class="rounded-xl bg-white/5 border border-white/10 p-3">
                  <div class="flex items-center justify-between">
                    <span class="text-[12px] text-slate-300">From</span>
                    <span class="text-[12px] text-slate-300">Balance: <span class="text-slate-200">32.874 SOL</span></span>
                  </div>
                  <div class="mt-2 flex items-center gap-2">
                    <button class="px-3 py-2 rounded-lg bg-slate-800/50 border border-white/10 text-[13px] flex items-center gap-2">
                      <div class="size-5 rounded-full bg-yellow-400/80"></div>
                      SOL
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down size-4 text-slate-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
                    </button>
                    <div class="ml-auto text-right">
                      <p class="text-[16px] font-medium tracking-tight">2.5</p>
                      <p class="text-[11px] text-slate-400">≈ $250.00 (USD)</p>
                    </div>
                  </div>
                </div>

                <div class="my-3 flex items-center justify-center">
                  <div class="size-9 rounded-full bg-white/10 border border-white/10 grid place-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-down-up" class="lucide lucide-arrow-down-up size-4 text-slate-200"><path d="m3 16 4 4 4-4" class=""></path><path d="M7 20V4" class=""></path><path d="m21 8-4-4-4 4" class=""></path><path d="M17 4v16" class=""></path></svg>
                  </div>
                </div>

                <div class="rounded-xl bg-white/5 border border-white/10 p-3">
                  <div class="flex items-center justify-between">
                    <span class="text-[12px] text-slate-300">Receive</span>
                    <span class="text-[12px] text-slate-300">Exchange Fee: <span class="text-slate-200">0.50 DOGE</span></span>
                  </div>
                  <div class="mt-2 flex items-center gap-2">
                    <button class="px-3 py-2 rounded-lg bg-slate-800/50 border border-white/10 text-[13px] flex items-center gap-2">
                      <div class="size-5 rounded-full bg-orange-400/80"></div>
                      DOGE
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down size-4 text-slate-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
                    </button>
                    <div class="ml-auto text-right">
                      <p class="text-[16px] font-medium tracking-tight">3,200</p>
                      <p class="text-[11px] text-slate-400">DOGE</p>
                    </div>
                  </div>
                </div>

                <button class="mt-3 w-full rounded-xl purple-grad py-3 text-[14px] font-medium shadow-[0_14px_40px_rgba(99,102,241,0.55)] flex items-center justify-center gap-2">
                  <i data-lucide="swap" class="size-5 text-white"></i>
                  Swap
                </button>
              </div>