Tailwind CSS Payment Cards Blocks

Payment Cards

Payment card blocks for saved billing cards, masked digits, currency labels, and expired states across payments dashboards and billing views.

Saved Payment Card Grid with Active and Expired States Pro

Saved payment card grid displays multiple card tiles with masked digits, currency labels, and mixed active or expired states in one compact row.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                      
                      <div class="py-5 px-4 relative w-full flex flex-col justify-between text-start bg-inverse rounded-xl">
                        <div class="mb-10 flex flex-wrap items-center whitespace-nowrap gap-2">
                          <svg class="shrink-0 size-6" width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 11C1 5.47715 5.47715 1 11 1H71C76.5228 1 81 5.47715 81 11V71C81 76.5228 76.5228 81 71 81H11C5.47715 81 1 76.5228 1 71V11Z" fill="currentColor" class="fill-yellow-500"/>
                            <path d="M29 32C29 30.3431 30.3431 29 32 29H50C51.6569 29 53 30.3431 53 32V50C53 51.6569 51.6569 53 50 53H32C30.3431 53 29 51.6569 29 50V32Z" fill="currentColor" class="fill-yellow-500"/>
                            <path d="M41 2V80M52.1177 52.1249L61.5334 63.2903C61.9134 63.7404 62.4724 64 63.0615 64H81M29.8712 52.1139L20.4666 63.2903C20.0866 63.7404 19.5276 64 18.9385 64H1M52.1232 29.8805L61.5334 18.7097C61.9134 18.2596 62.4724 18 63.0615 18H81M29.8862 29.8712L20.4666 18.7097C20.0866 18.2596 19.5276 18 18.9385 18H1M81 41H53M1 41H29M11 81H71C76.5228 81 81 76.5228 81 71V11C81 5.47715 76.5228 1 71 1H11C5.47715 1 1 5.47715 1 11V71C1 76.5228 5.47715 81 11 81ZM32 53H50C51.6569 53 53 51.6569 53 50V32C53 30.3431 51.6569 29 50 29H32C30.3431 29 29 30.3431 29 32V50C29 51.6569 30.3431 53 32 53Z" stroke="black" stroke-width="2" stroke-linecap="round"/>
                          </svg>
                          <svg class="shrink-0 size-5 text-foreground-inverse rotate-90" 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"><path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/></svg>
                        </div>
                        <div class="w-full flex justify-between items-center">
                          <div class="grow">
                            <div class="flex flex-wrap items-center whitespace-nowrap gap-2">
                              <span class="inline-flex items-center relative text-foreground-inverse font-mono font-medium">
                                •••• 8080
                              </span>
                              <span class="inline-flex items-center relative font-mono font-medium text-foreground-inverse ps-3 before:absolute before:top-1/2 before:inset-s-0 before:inline-block before:h-3 before:border-s before:border-line-inverse before:rounded-full before:-translate-y-1/2">
                                USD
                              </span>
                            </div>
                            <span class="block text-foreground-inverse font-mono text-sm">
                              Expires 12/24
                            </span>
                          </div>
                          <svg class="shrink-0 w-8 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="hs-pro-rjr1" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"/></mask><g mask="url(#hs-pro-rjr1)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"/><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"/><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"/></g></svg>
                        </div>

<div class="py-5 px-4 relative w-full flex flex-col justify-between text-start bg-surface-2 rounded-xl">
                        <div class="mb-10 flex flex-wrap items-center whitespace-nowrap gap-2">
                          <svg class="shrink-0 size-6" width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 11C1 5.47715 5.47715 1 11 1H71C76.5228 1 81 5.47715 81 11V71C81 76.5228 76.5228 81 71 81H11C5.47715 81 1 76.5228 1 71V11Z" fill="currentColor" class="fill-yellow-500"/>
                            <path d="M29 32C29 30.3431 30.3431 29 32 29H50C51.6569 29 53 30.3431 53 32V50C53 51.6569 51.6569 53 50 53H32C30.3431 53 29 51.6569 29 50V32Z" fill="currentColor" class="fill-yellow-500"/>
                            <path d="M41 2V80M52.1177 52.1249L61.5334 63.2903C61.9134 63.7404 62.4724 64 63.0615 64H81M29.8712 52.1139L20.4666 63.2903C20.0866 63.7404 19.5276 64 18.9385 64H1M52.1232 29.8805L61.5334 18.7097C61.9134 18.2596 62.4724 18 63.0615 18H81M29.8862 29.8712L20.4666 18.7097C20.0866 18.2596 19.5276 18 18.9385 18H1M81 41H53M1 41H29M11 81H71C76.5228 81 81 76.5228 81 71V11C81 5.47715 76.5228 1 71 1H11C5.47715 1 1 5.47715 1 11V71C1 76.5228 5.47715 81 11 81ZM32 53H50C51.6569 53 53 51.6569 53 50V32C53 30.3431 51.6569 29 50 29H32C30.3431 29 29 30.3431 29 32V50C29 51.6569 30.3431 53 32 53Z" stroke="black" stroke-width="2" stroke-linecap="round"/>
                          </svg>
                          <svg class="shrink-0 size-5 text-foreground rotate-90" 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"><path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/></svg>
                        </div>
                        <div class="w-full flex justify-between items-center">
                          <div class="grow">
                            <div class="flex flex-wrap items-center whitespace-nowrap gap-2">
                              <span class="inline-flex items-center relative text-foreground font-mono font-medium">
                                •••• 4222
                              </span>
                              <span class="inline-flex items-center relative font-mono font-medium text-foreground ps-3 before:absolute before:top-1/2 before:inset-s-0 before:inline-block before:h-3 before:border-s before:border-line-8 before:rounded-full before:-translate-y-1/2">
                                USD
                              </span>
                            </div>
                            <span class="block text-foreground font-mono text-sm">
                              Expires 07/29
                            </span>
                          </div>
                          <svg class="shrink-0 w-8 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="hs-pro-rjr2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"/></mask><g mask="url(#hs-pro-rjr2)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"/><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"/><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"/></g></svg>
                        </div>

<div class="py-5 px-4 relative w-full flex flex-col justify-between text-start bg-inverse rounded-xl">
                        <div class="mb-10 flex flex-wrap items-center whitespace-nowrap gap-2">
                          <svg class="shrink-0 size-6" width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 11C1 5.47715 5.47715 1 11 1H71C76.5228 1 81 5.47715 81 11V71C81 76.5228 76.5228 81 71 81H11C5.47715 81 1 76.5228 1 71V11Z" fill="currentColor" class="fill-yellow-500"/>
                            <path d="M29 32C29 30.3431 30.3431 29 32 29H50C51.6569 29 53 30.3431 53 32V50C53 51.6569 51.6569 53 50 53H32C30.3431 53 29 51.6569 29 50V32Z" fill="currentColor" class="fill-yellow-500"/>
                            <path d="M41 2V80M52.1177 52.1249L61.5334 63.2903C61.9134 63.7404 62.4724 64 63.0615 64H81M29.8712 52.1139L20.4666 63.2903C20.0866 63.7404 19.5276 64 18.9385 64H1M52.1232 29.8805L61.5334 18.7097C61.9134 18.2596 62.4724 18 63.0615 18H81M29.8862 29.8712L20.4666 18.7097C20.0866 18.2596 19.5276 18 18.9385 18H1M81 41H53M1 41H29M11 81H71C76.5228 81 81 76.5228 81 71V11C81 5.47715 76.5228 1 71 1H11C5.47715 1 1 5.47715 1 11V71C1 76.5228 5.47715 81 11 81ZM32 53H50C51.6569 53 53 51.6569 53 50V32C53 30.3431 51.6569 29 50 29H32C30.3431 29 29 30.3431 29 32V50C29 51.6569 30.3431 53 32 53Z" stroke="black" stroke-width="2" stroke-linecap="round"/>
                          </svg>
                          <svg class="shrink-0 size-5 text-foreground-inverse rotate-90" 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"><path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/></svg>
                        </div>
                        <div class="w-full flex justify-between items-center">
                          <div class="grow">
                            <div class="flex flex-wrap items-center whitespace-nowrap gap-2">
                              <span class="inline-flex items-center relative text-foreground-inverse font-mono font-medium">
                                •••• 9870
                              </span>
                              <span class="inline-flex items-center relative font-mono font-medium text-foreground-inverse ps-3 before:absolute before:top-1/2 before:inset-s-0 before:inline-block before:h-3 before:border-s before:border-line-inverse before:rounded-full before:-translate-y-1/2">
                                USD
                              </span>
                            </div>
                            <span class="block text-red-500 font-mono text-sm">
                              Expired 02/24
                            </span>
                          </div>
                          <svg class="shrink-0 w-8 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="hs-pro-rjr3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"/></mask><g mask="url(#hs-pro-rjr3)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"/><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"/><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"/></g></svg>
                        </div>
                      </div>
                      
                    </div>

Open related payments cards page