Insurance patterns
Payment review
Separate the amount due, the payment state, and the policy issuance state.
Usage & approach
These are visual examples, not a payment integration. Never collect card details in an unapproved form. Amounts and references are fictional. Use the actual backend state for pending, successful, and failed payments, and keep recovery actions specific.
Specifications
- Amount
- text-3xl font-semibold tabular-nums
- Reference
- font-mono text-xs break-all
- Status
- Explicit message; no reliance on color alone.
- Recovery
- One clear next action for a failed payment.
Pending payment
A neutral pending state keeps the expected next step clear.
<section class="mx-auto max-w-md rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]">
<span class="rounded-md bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-800 dark:bg-amber-950 dark:text-amber-200">Payment pending</span><h2 class="mt-5 text-xl font-semibold">Waiting for confirmation</h2><p class="mt-3 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">The payment provider has not confirmed this sample transaction. Policy issuance is a separate step.</p><p class="mt-6 text-3xl font-semibold tabular-nums">₱1,250.00</p><p class="mt-3 break-all font-mono text-xs text-[#808080] dark:text-[#b2b7b4]">DEMO-PAY-0001</p>
</section>HTML + Tailwind CSS · fit to panel
Failed payment
Explain the failure without exposing provider internals.
<section class="mx-auto max-w-md rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]"><p class="text-sm font-semibold text-red-700 dark:text-red-300">Payment not completed</p><h2 class="mt-3 text-xl font-semibold">Try your payment again</h2><p class="mt-3 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Confirm the transaction status before starting another payment attempt.</p><button type="button" class="mt-6 inline-flex min-h-11 items-center justify-center rounded-md bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#00552e] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:bg-[#006838] dark:text-white dark:hover:bg-[#00552e] dark:focus-visible:outline-[#006838] disabled:cursor-not-allowed disabled:opacity-50">Review payment</button></section>HTML + Tailwind CSS · fit to panel
Bring this into your project
Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.