<div
class="relative mx-auto w-full max-w-sm rounded-xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
<div class="flex grow items-center px-6 py-10 sm:px-10 sm:py-14">
<div class="grow">
<div class="text-center">
<h2 class="text-2xl font-extrabold">Payment Method</h2>
<p class="mt-1 text-sm leading-relaxed text-zinc-600">
Add a new payment method to your account.
</p>
</div>
<div class="mt-5 grid grid-cols-3 gap-4">
<a
href="javascript:void(0)"
class="flex aspect-square items-center justify-center rounded-lg border border-zinc-500"
>
<div
class="flex flex-col items-center justify-center gap-2 text-sm font-medium"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
aria-hidden="true"
class="bi bi-credit-card-2-back-fill inline-block size-5"
>
<path
d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5H0V4zm11.5 1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-2zM0 11v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1H0z"
/>
</svg>
<div>Card</div>
</div>
</a>
<a
href="javascript:void(0)"
class="flex aspect-square items-center justify-center rounded-lg border border-zinc-200 hover:border-zinc-400"
>
<div
class="flex flex-col items-center justify-center gap-2 text-sm font-medium"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
aria-hidden="true"
class="bi bi-paypal inline-block size-5"
>
<path
d="M14.06 3.713c.12-1.071-.093-1.832-.702-2.526C12.628.356 11.312 0 9.626 0H4.734a.7.7 0 0 0-.691.59L2.005 13.509a.42.42 0 0 0 .415.486h2.756l-.202 1.28a.628.628 0 0 0 .62.726H8.14c.429 0 .793-.31.862-.731l.025-.13.48-3.043.03-.164.001-.007a.351.351 0 0 1 .348-.297h.38c1.266 0 2.425-.256 3.345-.91.379-.27.712-.603.993-1.005a4.942 4.942 0 0 0 .88-2.195c.242-1.246.13-2.356-.57-3.154a2.687 2.687 0 0 0-.76-.59l-.094-.061ZM6.543 8.82a.695.695 0 0 1 .321-.079H8.3c2.82 0 5.027-1.144 5.672-4.456l.003-.016c.217.124.4.27.548.438.546.623.679 1.535.45 2.71-.272 1.397-.866 2.307-1.663 2.874-.802.57-1.842.815-3.043.815h-.38a.873.873 0 0 0-.863.734l-.03.164-.48 3.043-.024.13-.001.004a.352.352 0 0 1-.348.296H5.595a.106.106 0 0 1-.105-.123l.208-1.32.845-5.214Z"
/>
</svg>
<div>PayPal</div>
</div>
</a>
<a
href="javascript:void(0)"
class="flex aspect-square items-center justify-center rounded-lg border border-zinc-200 hover:border-zinc-400"
>
<div
class="flex flex-col items-center justify-center gap-2 text-sm font-medium"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
aria-hidden="true"
class="bi bi-apple inline-block size-5"
>
<path
d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"
/>
<path
d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"
/>
</svg>
<div>Apple</div>
</div>
</a>
</div>
<form class="mt-5 flex flex-col gap-5">
<div class="space-y-2">
<label for="name" class="inline-block text-sm font-medium"
>Name</label
>
<input
id="name"
type="text"
required
class="block w-full rounded-lg border border-zinc-200 bg-white px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
/>
</div>
<div class="space-y-2">
<label for="card" class="inline-block text-sm font-medium"
>Card</label
>
<input
id="card"
type="number"
required
class="block w-full rounded-lg border border-zinc-200 bg-white px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
/>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<label for="expiry" class="inline-block text-sm font-medium"
>Expiry</label
>
<input
id="expiry"
type="text"
placeholder="MM/YY"
required
class="block w-full rounded-lg border border-zinc-200 bg-white px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
/>
</div>
<div class="space-y-2">
<label for="cvc" class="inline-block text-sm font-medium"
>CVC</label
>
<input
id="cvc"
type="text"
placeholder="***"
required
class="block w-full rounded-lg border border-zinc-200 bg-white px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
/>
</div>
</div>
<button
type="submit"
class="flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
>
Add new card
</button>
<div class="text-center text-xs font-medium text-zinc-500">
Alternate methods?
<a
href="javascript:void(0)"
class="text-zinc-800 underline decoration-slate-300 underline-offset-2 hover:text-zinc-900"
>Contact us</a
>
</div>
</form>
</div>
</div>
</div>