<div class="card">
<div class="card-content grid gap-6">
<div class="grid gap-2">
<h3 class="text-lg/6 font-semibold">Payment Method</h3>
<p class="text-sm/6 text-muted-foreground">Choose how you'd like to pay for your order.</p>
</div>
<div class="grid grid-cols-3 gap-4">
<label class="relative flex flex-col items-center gap-2 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/5">
<input type="radio" class="sr-only" name="payment" checked="" value="card" />
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"></path></svg>
<span class="text-sm font-medium">Card</span>
</label>
<label class="relative flex flex-col items-center gap-2 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/5">
<input type="radio" class="sr-only" name="payment" value="paypal" />
<svg viewBox="0 0 24 24" fill="currentColor" class="size-6"><path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.77.77 0 0 1 .757-.629h6.724c2.332 0 4.063.642 5.143 1.908.503.59.84 1.263 1.003 2.005.17.776.144 1.7-.08 2.744l-.004.015v.042c-.336 1.732-1.017 3.124-2.025 4.14-.958.965-2.232 1.591-3.788 1.86-.616.106-1.284.16-1.987.16H8.33a.77.77 0 0 0-.758.63l-.737 4.665a.641.641 0 0 1-.633.54h-.025l-.001.137z"></path></svg>
<span class="text-sm font-medium">PayPal</span>
</label>
<label class="relative flex flex-col items-center gap-2 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/5">
<input type="radio" class="sr-only" name="payment" value="apple" />
<svg viewBox="0 0 24 24" fill="currentColor" class="size-6"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"></path></svg>
<span class="text-sm font-medium">Apple</span>
</label>
</div>
<div class="grid gap-6">
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="cardholder-name">Cardholder Name</label></div>
<input id="cardholder-name" class="input" type="text" placeholder="John Doe" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="card-number">Card Number</label></div>
<input id="card-number" class="input" type="text" placeholder="1234 5678 9012 3456" />
</div>
<div class="grid grid-cols-3 gap-4">
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="month">Month</label></div>
<input id="month" class="input" type="text" placeholder="MM" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="year">Year</label></div>
<input id="year" class="input" type="text" placeholder="YY" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="cvv">CVV</label></div>
<input id="cvv" class="input" type="text" placeholder="123" />
</div>
</div>
<button class="btn" type="submit">Continue</button>
</div>
</div>
</div>
