<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
<div class="rounded bg-white w-full max-w-lg">
<ul>
<li class="px-8 py-4 border-b border-blue-200">
<div class="flex items-center"><input type="radio" name="payment-option" checked="checked"> <img src="https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/mc.svg" class="mx-2 w-10">
<div class="font-semibold">Credit Card</div>
</div><label class="mt-4 ml-6 flex flex-col"><span class="text-sm text-gray-500">Card Number</span> <input type="text" maxlength="19" placeholder="1234-1234-1234-1234" class="border border-blue-200 rounded p-2 w-96"></label>
</li>
<li class="px-8 py-4 border-b border-blue-200">
<div class="flex items-center"><input type="radio" name="payment-option"> <img src="https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/paypal.svg" class="mx-2 w-10">
<div class="font-semibold">PayPal</div>
</div>
</li>
<li class="px-8 py-4">
<div class="flex items-center"><input type="radio" name="payment-option"> <img src="https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/ideal.svg" class="mx-2 w-10">
<div class="font-semibold">Ideal</div>
</div>
</li>
</ul>
</div>
</div>