Tailwind CSS Payment Success
A payment success card for Tailwind CSS with a success icon, the amount and reference, and stacked actions. Built with the card and button components.
<div class="card w-full max-w-sm">
<div
class="card-content flex flex-col items-center gap-4 text-center text-balance"
>
<div
class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground"
>
<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"
class="lucide lucide-check size-6"
aria-hidden="true"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<div class="flex max-w-sm flex-col items-center gap-1">
<div class="text-lg font-medium tracking-tight">Invoice paid</div>
<div class="text-sm/relaxed text-muted-foreground">
You paid $17,975.30. A receipt copy was sent to [email protected].
</div>
</div>
<div class="flex w-full flex-col gap-3">
<button type="button" class="btn w-full">Next invoice</button
><button type="button" class="btn btn-outline w-full">Done</button>
</div>
</div>
</div>