Tailwind CSS Payment Method Panels Blocks

Payment Method Panels

Payment method panels for card detail rows, payment card grids, saved card settings, and stored payment management across finance products.

Payment Method Detail Card with Card Brand and Change Action Pro

Payment method detail card combines a card-brand icon, masked card label, expiry text, and a trailing change action in one compact row.

<button type="button" class=" p-3 w-full flex items-center gap-x-3 text-start bg-layer border border-layer-line rounded-xl hover:bg-layer-hover focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-pysapo" >
      <span class="flex shrink-0 justify-center items-center size-8 bg-layer border border-layer-line rounded-full">
        <svg class="shrink-0 w-5 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asfasfa1123123" 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"></path></mask><g mask="url(#asfasfa1123123)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"></path><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><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"></path></g></svg>
      </span>

<span class="grow">
        <span class="block font-medium text-sm text-foreground">
          Debit card •••• 8080
        </span>
        <span class="block text-sm text-muted-foreground-1">
          Expires 12/24
        </span>
      </span>

<span>
        <span class="flex items-center gap-x-1 font-medium text-sm text-primary">
          Change
          <svg class="shrink-0 size-4" 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="m9 18 6-6-6-6"/></svg>
        </span>
      </span>
    </button>

Open related payments send amount page

Payment Card Grid with Balance Totals and Card Digits Pro

Payment card grid presents stored card balances with currency symbols, totals, and masked card digits in compact bordered tiles.

<a class="block py-2 px-3 sm:p-4 group bg-surface rounded-2xl hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="../../../templates/payments/payments-dashboard/balances.html">
      <div class="flex gap-x-2 sm:gap-x-4">
        
        <svg class="shrink-0 size-8 mt-1 rounded-full" xmlns="http://www.w3.org/2000/svg" id="usd" viewBox="0 0 512 512"><g fill-rule="evenodd"><g stroke-width="1pt"><path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/><path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/></g><path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"/><path fill="#fff" d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)"/></g></svg>

<div class="grow">
          <p class="font-semibold text-lg text-foreground">
            45,128
          </p>
          <div class="flex flex-wrap justify-between items-center gap-2">
            <div class="grow">
              <p class="text-sm text-muted-foreground-1">
                USD
              </p>
            </div>
            <div class="flex items-center gap-x-1">
              <svg class="shrink-0 size-3.5 text-muted-foreground-1" 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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>

<div class="grow">
          <p class="font-semibold text-lg text-foreground">
            0.00
          </p>
          <div class="flex flex-wrap justify-between items-center gap-2">
            <div class="grow">
              <p class="text-sm text-muted-foreground-1">
                GBP
              </p>
            </div>
          </div>
        </div>
        
      </div>
    </a>

Open related payments dashboard page

Saved Payment Methods Panel with Add Card and Manage Actions Pro

Saved payment methods panel stacks stored card rows above footer actions that launch manage-cards and add-card flows.

<div class="flex flex-col bg-card border border-card-line rounded-xl">
      
      <div class="h-full p-4 md:p-6">
        <h2 class="text-xl font-semibold text-foreground">
          Payment methods
        </h2>

<p class="mt-2 text-sm text-muted-foreground-1">
          Add and manage your payment methods using our secure payment system.
        </p>

<div class="mt-6">
          
          <ul class="flex flex-col -space-y-px">
            
            <li class="py-4 first:pt-0 last:pb-0 border-t border-line-2 first:border-t-0">
              
              <div class="flex gap-x-3">
                
                <div>
                  <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                    <svg class="shrink-0 w-6 sm:w-8 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_666_270977asdasd" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="5" width="35" height="12"><path d="M34.5 5.4751H0.5V16.5081H34.5V5.4751Z" fill="white"/></mask><g mask="url(#mask0_666_270977asdasd)"><path d="M15.239 16.3211H12.468L14.202 5.6621H16.973L15.239 16.3211ZM10.139 5.6621L7.487 12.9891L7.181 11.4081L6.246 6.6311C6.246 6.6311 6.127 5.6791 4.937 5.6791H0.551L0.5 5.8491C0.5 5.8491 1.843 6.1211 3.407 7.0731L5.821 16.3381H8.711L13.131 5.6791L10.139 5.6621ZM31.95 16.3211H34.5L32.273 5.6621H30.046C29.009 5.6621 28.771 6.4611 28.771 6.4611L24.64 16.3211H27.53L28.108 14.7401H31.627L31.95 16.3211ZM28.907 12.5471L30.369 8.5521L31.185 12.5471H28.907ZM24.844 8.2291L25.235 5.9341C25.235 5.9341 24.011 5.4751 22.736 5.4751C21.359 5.4751 18.095 6.0701 18.095 9.0111C18.095 11.7651 21.937 11.7991 21.937 13.2441C21.937 14.6891 18.503 14.4341 17.364 13.5161L16.956 15.9131C16.956 15.9131 18.197 16.5081 20.084 16.5081C21.971 16.5081 24.827 15.5221 24.827 12.8531C24.827 10.0821 20.951 9.8271 20.951 8.6201C20.951 7.4131 23.654 7.5661 24.844 8.2291Z" fill="#2566AF"/><path d="M7.181 11.4252L6.246 6.6312C6.246 6.6312 6.127 5.6792 4.937 5.6792H0.551L0.5 5.8492C0.5 5.8492 2.608 6.2912 4.614 7.9232C6.552 9.4702 7.181 11.4252 7.181 11.4252Z" fill="#E6A540"/></g></svg>
                  </div>
                </div>
                
    
                
                <div class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
                  <div>
                    <p class="text-sm font-medium text-foreground">
                      Visa •••• 9016
                    </p>
                    <p class="text-xs text-muted-foreground-1">
                      Debit Expires  12/25
                    </p>
                  </div>

<div class="flex gap-x-2">
                    <div>
                      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                        Default
                      </button>
                    </div>
        
                      <div>
                      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-deacm" >
                        Edit
                      </button>
                    </div>
                  </div>
                  
                </div>
                
              </div>
              
            </li>

<li class="py-4 first:pt-0 last:pb-0 border-t border-line-2 first:border-t-0">
              
              <div class="flex gap-x-3">
                
                <div>
                  <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                    <svg class="shrink-0 w-6 sm:w-8 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asfasfa1123f33123" 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(#asfasfa1123f33123)"><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 class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
                  <div>
                    <p class="text-sm font-medium text-foreground">
                      MasterCard •••• 4242
                    </p>
                    <p class="text-xs text-muted-foreground-1">
                      Debit Expires  04/24
                    </p>
                  </div>

<div class="flex gap-x-2">
                    <div>
                      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" >
                        Set as default
                      </button>
                    </div>
        
                      <div>
                      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-deacm" >
                        Edit
                      </button>
                    </div>
                  </div>
                  
                </div>
                
              </div>
              
            </li>
            
          </ul>
          
        </div>
      </div>

<div class="flex border-t border-card-footer divide-x divide-card-divider">
        <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-es-xl bg-layer text-layer-foreground shadow-xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-dmcm">
          Manage cards
        </button>
        <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-ee-xl bg-layer text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-dmacm">
          <svg class="shrink-0 size-4" 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"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>
          Add new card
        </button>
      </div>
      
    </div>

Saved Card Management Panel with Overlay Header Pro

Saved card management panel wraps a modal-style header and stacked saved card rows inside a bordered settings card.

<div class="bg-card border border-card-line shadow-2xs rounded-xl">
      
      <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
        <h2  class="font-medium text-foreground">
          Manage cards
        </h2>
      </div>

<ul class="flex flex-col">
        
        <li class="p-4 border-t border-line-2 first:border-t-0">
          
          <div class="flex gap-x-3">
            
            <div>
              <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                <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="asdafg" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="5" width="35" height="12"><path d="M34.5 5.4751H0.5V16.5081H34.5V5.4751Z" fill="white"/></mask><g mask="url(#asdafg)"><path d="M15.239 16.3211H12.468L14.202 5.6621H16.973L15.239 16.3211ZM10.139 5.6621L7.487 12.9891L7.181 11.4081L6.246 6.6311C6.246 6.6311 6.127 5.6791 4.937 5.6791H0.551L0.5 5.8491C0.5 5.8491 1.843 6.1211 3.407 7.0731L5.821 16.3381H8.711L13.131 5.6791L10.139 5.6621ZM31.95 16.3211H34.5L32.273 5.6621H30.046C29.009 5.6621 28.771 6.4611 28.771 6.4611L24.64 16.3211H27.53L28.108 14.7401H31.627L31.95 16.3211ZM28.907 12.5471L30.369 8.5521L31.185 12.5471H28.907ZM24.844 8.2291L25.235 5.9341C25.235 5.9341 24.011 5.4751 22.736 5.4751C21.359 5.4751 18.095 6.0701 18.095 9.0111C18.095 11.7651 21.937 11.7991 21.937 13.2441C21.937 14.6891 18.503 14.4341 17.364 13.5161L16.956 15.9131C16.956 15.9131 18.197 16.5081 20.084 16.5081C21.971 16.5081 24.827 15.5221 24.827 12.8531C24.827 10.0821 20.951 9.8271 20.951 8.6201C20.951 7.4131 23.654 7.5661 24.844 8.2291Z" fill="#2566AF"/><path d="M7.181 11.4252L6.246 6.6312C6.246 6.6312 6.127 5.6792 4.937 5.6792H0.551L0.5 5.8492C0.5 5.8492 2.608 6.2912 4.614 7.9232C6.552 9.4702 7.181 11.4252 7.181 11.4252Z" fill="#E6A540"/></g></svg>
              </div>
            </div>
            
    
            
            <div class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
              <div>
                <p class="text-sm font-medium text-foreground">
                  Visa •••• 9016
                </p>
                <p class="text-xs text-muted-foreground-1">
                  Debit Expires  12/25
                </p>
              </div>

<div class="flex gap-x-2">
                <div>
                  <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                    Default
                  </button>
                </div>
        
                  <div>
                  <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-deacm" >
                    Edit
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
          
        </li>

<li class="p-4 border-t border-line-2 first:border-t-0">
          
          <div class="flex gap-x-3">
            
            <div>
              <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                <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="mask0_666_271011af12112c3" 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(#mask0_666_271011af12112c3)"><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 class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
              <div>
                <p class="text-sm font-medium text-foreground">
                  MasterCard •••• 4242
                </p>
                <p class="text-xs text-muted-foreground-1">
                  Debit Expires  04/24
                </p>
              </div>

<div class="flex gap-x-2">
                <div>
                  <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" >
                    Set as default
                  </button>
                </div>
        
                  <div>
                  <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-deacm" >
                    Edit
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
          
        </li>

<li class="p-4 border-t border-line-2 first:border-t-0">
          
          <div class="flex gap-x-3">
            
            <div>
              <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                <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="mask0_666_271011" 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(#mask0_666_271011)"><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 class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
              <div>
                <p class="text-sm font-medium text-foreground">
                  MasterCard •••• 0232
                </p>
                <p class="text-xs text-muted-foreground-1">
                  Debit  <span class="text-red-500">Expired</span> 01/20
                </p>
              </div>

<div class="flex gap-x-2">
                <div>
                  <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                    Set as default
                  </button>
                </div>
        
                  <div>
                  <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-deacm" >
                    Edit
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
          
        </li>

<li class="p-4 border-t border-line-2 first:border-t-0">
          
          <div class="flex gap-x-3">
            
            <div>
              <div class="py-1.5 px-2.5 sm:py-2.5 sm:px-3 bg-layer border border-layer-line rounded-lg">
                <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="mask0_666_270977sfa1112" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="5" width="35" height="12"><path d="M34.5 5.4751H0.5V16.5081H34.5V5.4751Z" fill="white"/></mask><g mask="url(#mask0_666_270977sfa1112)"><path d="M15.239 16.3211H12.468L14.202 5.6621H16.973L15.239 16.3211ZM10.139 5.6621L7.487 12.9891L7.181 11.4081L6.246 6.6311C6.246 6.6311 6.127 5.6791 4.937 5.6791H0.551L0.5 5.8491C0.5 5.8491 1.843 6.1211 3.407 7.0731L5.821 16.3381H8.711L13.131 5.6791L10.139 5.6621ZM31.95 16.3211H34.5L32.273 5.6621H30.046C29.009 5.6621 28.771 6.4611 28.771 6.4611L24.64 16.3211H27.53L28.108 14.7401H31.627L31.95 16.3211ZM28.907 12.5471L30.369 8.5521L31.185 12.5471H28.907ZM24.844 8.2291L25.235 5.9341C25.235 5.9341 24.011 5.4751 22.736 5.4751C21.359 5.4751 18.095 6.0701 18.095 9.0111C18.095 11.7651 21.937 11.7991 21.937 13.2441C21.937 14.6891 18.503 14.4341 17.364 13.5161L16.956 15.9131C16.956 15.9131 18.197 16.5081 20.084 16.5081C21.971 16.5081 24.827 15.5221 24.827 12.8531C24.827 10.0821 20.951 9.8271 20.951 8.6201C20.951 7.4131 23.654 7.5661 24.844 8.2291Z" fill="#2566AF"/><path d="M7.181 11.4252L6.246 6.6312C6.246 6.6312 6.127 5.6792 4.937 5.6792H0.551L0.5 5.8492C0.5 5.8492 2.608 6.2912 4.614 7.9232C6.552 9.4702 7.181 11.4252 7.181 11.4252Z" fill="#E6A540"/></g></svg>
              </div>
            </div>
            
    
            
            <div class="grow flex flex-col sm:flex-row sm:justify-between gap-3">
              <div>
                <p class="text-sm font-medium text-foreground">
                  Visa •••• 9016
                </p>
                <p class="text-xs text-muted-foreground-1">
                  Debit  <span class="text-red-500">Expired</span> 06/20
                </p>
              </div>

<div class="flex gap-x-2">
                <div>
                  <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                    Default
                  </button>
                </div>
        
                  <div>
                  <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-deacm" >
                    Edit
                  </button>
                </div>
              </div>
              
            </div>
            
          </div>
          
        </li>
        
      </ul>
      
      
    </div>