Tailwind CSS Invoice Layouts Blocks

Invoice Layouts

Invoice layouts with expandable invoice records, compact invoice pages, and carded invoice views for billing, payments, and admin products.

Expandable Invoice List Item Card with Status Actions Pro

Expandable invoice list item card reveals billing, sender, bank, due-date, and action details from a compact summary row.

<div class="p-4 bg-card border border-card-line rounded-xl shadow-2xs">
      
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-4 gap-x-6">
        
        <div class="flex flex-col gap-y-0.5">
          <span class="block font-medium text-foreground">
            Invoice for BlueVista Innovations
          </span>

<div class="flex flex-col gap-y-0.5">
          <div class="text-sm text-muted-foreground-1">
            Invoice date:
          </div>

<p class="text-sm text-foreground">
            April 5, 2025
          </p>
        </div>

<div class="flex flex-col gap-y-0.5">
          <div class="text-sm text-muted-foreground-1">
            Total amount:
          </div>

<p class="text-sm text-foreground">
                <span class="block font-medium">
                  Preline Labs Ltd.
                </span>
                <span class="block">
                  500 Technology Dr, San Francisco, CA 94107, United States
                </span>
                <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                  support@site.com
                </a>
              </p>
            </div>

<div class="flex flex-col gap-y-4">
              <div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Sender address:
                </div>

<p class="text-sm text-foreground">
                  <span class="block font-medium">
                    BlueVista Innovations
                  </span>
                  <span class="block">
                    4222 River Rd, New York, NY 31904, United States
                  </span>
                  <span class="block">
                    +1 212-555-1212
                  </span>
                  <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                    hello@bluevista.com
                  </a>
                </p>
              </div>
            </div>

<div class="flex flex-col gap-y-2">
              <div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Bank name:
                </div>
    
                <p class="text-sm text-foreground">
                  Bank of America
                </p>
              </div>

<div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Account holder name:
                </div>
    
                <p class="text-sm text-foreground">
                  John Doe
                </p>
              </div>

<div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Bank routing number:
                </div>
    
                <p class="text-sm text-foreground">
                  3482343-02
                </p>
              </div>

<div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Bank account number:
                </div>
    
                <p class="text-sm text-foreground">
                  203979120523904
                </p>
              </div>
            </div>
            
          </div>
          
        </div>
      </div>

<div class="mt-4">
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-4 gap-x-6">
          <div class="flex flex-col gap-y-0.5">
            <div class="text-sm text-muted-foreground-1">
              Description:
            </div>

<div class="flex flex-col gap-y-0.5">
            <div class="text-sm text-muted-foreground-1">
              Due date:
            </div>

<p class="text-sm text-foreground">
              April 10, 2025
            </p>
          </div>

<div class="flex flex-col gap-y-1.5">
            <div>
              <span class="py-1 px-2 inline-flex items-center gap-x-1 bg-red-100 text-red-800 text-nowrap text-xs rounded-md dark:bg-red-500/10 dark:text-red-400">
                <svg class="shrink-0 size-3.5" 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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                Overdue
              </span>

<div class="mt-2 flex flex-wrap gap-1">
                <div>
                  
                  <button type="button" class="py-1 px-2 inline-flex items-center gap-x-2 text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                    <svg class="shrink-0 size-3.5" 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="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
                    Resend
                  </button>
                  
                </div>
            
                <div>
                  
                  <button type="button" class="py-1 px-2 inline-flex items-center gap-x-2 text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                    <svg class="shrink-0 size-3.5" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                    Cancel
                  </button>
                  
                </div>
              </div>
            </div>
          </div>
          
        </div>
        
      </div>

<div class="pt-3 mt-4 border-t border-card-footer">
        <div class="flex flex-wrap justify-between gap-2">
          
          <ul class="flex flex-wrap items-center gap-3">
            
            <li class="relative ps-3 first:ps-0 first:before:hidden before:absolute before:top-1/2 before:inset-s-0 before:h-1/2 before:border-s before:border-line-2 before:-translate-y-1/2">
              <button type="button" class="inline-flex items-center gap-1.5 text-[13px] text-muted-foreground-2 decoration-2 hover:underline focus:outline-hidden focus:underline">
                <svg class="shrink-0 size-3.5" 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                Download
              </button>
            </li>

<li class="relative ps-3 first:ps-0 first:before:hidden before:absolute before:top-1/2 before:inset-s-0 before:h-1/2 before:border-s before:border-line-2 before:-translate-y-1/2">
              <button type="button" class="inline-flex items-center gap-1.5 text-[13px] text-muted-foreground-2 decoration-2 hover:underline focus:outline-hidden focus:underline">
                <svg class="shrink-0 size-3.5" 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="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>
                Archive
              </button>
            </li>

<li class="relative ps-3 first:ps-0 first:before:hidden before:absolute before:top-1/2 before:inset-s-0 before:h-1/2 before:border-s before:border-line-2 before:-translate-y-1/2">
              <button type="button" class="inline-flex items-center gap-1.5 text-[13px] text-muted-foreground-2 decoration-2 hover:underline focus:outline-hidden focus:underline">
                <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                Delete
              </button>
            </li>
            
          </ul>

<button type="button" class="hs-collapse-toggle inline-flex justify-center items-center gap-x-1 text-[13px] text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" id="hs-pro-cilishm1" aria-expanded="false" aria-controls="hs-pro-cilishm1-button" data-hs-collapse="#hs-pro-cilishm1-button">
            <span class="hs-collapse-open:hidden">View details</span>
            <svg class="hs-collapse-open:hidden shrink-0 size-3.5" 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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
            <span class="hs-collapse-open:block hidden">Hide details</span>
            <svg class="hs-collapse-open:block hidden shrink-0 size-3.5" 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="m7 20 5-5 5 5"/><path d="m7 4 5 5 5-5"/></svg>
          </button>
        </div>
      </div>
      
    </div>

Open related CRM customer invoices page

Compact Invoice Page with Detail Grid and Totals Free

Compact invoice page uses a full-width billing grid, line-item table, totals block, and print or download header actions.

<div class="max-w-340 px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
        
        <div class="mb-5 pb-5 flex justify-between items-center border-b border-line-2">
          <div>
            <h2 class="text-2xl font-semibold text-foreground">Invoice</h2>
          </div>

<div class="inline-flex gap-x-2">
            <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm 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" href="#">
            <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
              Invoice PDF
            </a>
            <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
              <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"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
              Print
            </a>
          </div>
          
        </div>

<div class="grid md:grid-cols-2 gap-3">
          <div>
            <div class="grid space-y-3">
              <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Billed to:
                </dt>
                <dd class="text-foreground">
                  <a class="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                    sara@site.com
                  </a>
                </dd>
              </dl>

<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Billing details:
                </dt>
                <dd class="font-medium text-foreground">
                  <span class="block font-semibold">Sara Williams</span>
                  <address class="not-italic font-normal">
                    280 Suzanne Throughway,<br>
                    Breannabury, OR 45801,<br>
                    United States<br>
                  </address>
                </dd>
              </dl>

<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Shipping details:
                </dt>
                <dd class="font-medium text-foreground">
                  <span class="block font-semibold">Sara Williams</span>
                  <address class="not-italic font-normal">
                    280 Suzanne Throughway,<br>
                    Breannabury, OR 45801,<br>
                    United States<br>
                  </address>
                </dd>
              </dl>
            </div>
          </div>

<div>
            <div class="grid space-y-3">
              <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Invoice number:
                </dt>
                <dd class="font-medium text-foreground">
                  ADUQ2189H1-0038
                </dd>
              </dl>

<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Currency:
                </dt>
                <dd class="font-medium text-foreground">
                  USD - US Dollar
                </dd>
              </dl>
        
              <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Due date:
                </dt>
                <dd class="font-medium text-foreground">
                  10 Jan 2023
                </dd>
              </dl>
        
              <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Billing method:
                </dt>
                <dd class="font-medium text-foreground">
                  Send invoice
                </dd>
              </dl>
            </div>
          </div>
          
        </div>

<div class="mt-6 border border-line-2 p-4 rounded-lg space-y-4">
          <div class="hidden sm:grid sm:grid-cols-5">
            <div class="sm:col-span-2 text-xs font-medium text-muted-foreground-1 uppercase">Item</div>
            <div class="text-start text-xs font-medium text-muted-foreground-1 uppercase">Qty</div>
            <div class="text-start text-xs font-medium text-muted-foreground-1 uppercase">Rate</div>
            <div class="text-end text-xs font-medium text-muted-foreground-1 uppercase">Amount</div>
          </div>

<div class="hidden sm:block border-b border-line-2"></div>
    
          <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
            <div class="col-span-full sm:col-span-2">
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
              <p class="font-medium text-foreground">Design UX and UI</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
              <p class="text-foreground">1</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
              <p class="text-foreground">5</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
              <p class="sm:text-end text-foreground">$500</p>
            </div>
          </div>

<div class="sm:hidden border-b border-line-2"></div>
    
          <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
            <div class="col-span-full sm:col-span-2">
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
              <p class="font-medium text-foreground">Web project</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
              <p class="text-foreground">1</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
              <p class="text-foreground">24</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
              <p class="sm:text-end text-foreground">$1250</p>
            </div>
          </div>

<div class="sm:hidden border-b border-line-2"></div>
    
          <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
            <div class="col-span-full sm:col-span-2">
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
              <p class="font-medium text-foreground">SEO</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
              <p class="text-foreground">1</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
              <p class="text-foreground">6</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
              <p class="sm:text-end text-foreground">$2000</p>
            </div>
          </div>
        </div>

<div class="mt-8 flex sm:justify-end">
          <div class="w-full max-w-2xl sm:text-end space-y-2">
            
            <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
              <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
                <dt class="col-span-3 text-muted-foreground-1">Subotal:</dt>
                <dd class="col-span-2 font-medium text-foreground">$2750.00</dd>
              </dl>

<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
                <dt class="col-span-3 text-muted-foreground-1">Total:</dt>
                <dd class="col-span-2 font-medium text-foreground">$2750.00</dd>
              </dl>

<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
                <dt class="col-span-3 text-muted-foreground-1">Amount paid:</dt>
                <dd class="col-span-2 font-medium text-foreground">$2789.00</dd>
              </dl>

<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
                <dt class="col-span-3 text-muted-foreground-1">Due balance:</dt>
                <dd class="col-span-2 font-medium text-foreground">$0.00</dd>
              </dl>
            </div>
            
          </div>
        </div>
        
      </div>

Carded Invoice Page with Header Actions and Totals Free

Carded invoice page wraps company header, billing details, line-item table, totals, and footer actions inside a centered panel.

<div class="max-w-340 px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
        <div class="sm:w-11/12 lg:w-3/4 mx-auto">
          
          <div class="flex flex-col p-4 sm:p-10 bg-layer shadow-md rounded-xl">
            
            <div class="flex justify-between">
              <div>
                <svg class="size-10" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 26V13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                  <path d="M5 26V13.16C5 8.65336 8.58172 5 13 5C17.4183 5 21 8.65336 21 13.16C21 17.6666 17.4183 21.32 13 21.32H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                  <circle cx="13" cy="13.0214" r="5" fill="currentColor" class="fill-primary"/>
                </svg>

<h1 class="mt-2 text-lg md:text-xl font-semibold text-primary">Preline Inc.</h1>
              </div>

<div class="text-end">
                <h2 class="text-2xl md:text-3xl font-semibold text-foreground">Invoice #</h2>
                <span class="mt-1 block text-muted-foreground-1">3682303</span>

<address class="mt-4 not-italic text-foreground">
                  45 Roker Terrace<br>
                  Latheronwheel<br>
                  KW5 8NW, London<br>
                  United Kingdom<br>
                </address>
              </div>
              
            </div>

<div class="mt-8 grid sm:grid-cols-2 gap-3">
              <div>
                <h3 class="text-lg font-semibold text-foreground">Bill to:</h3>
                <h3 class="text-lg font-semibold text-foreground">Sara Williams</h3>
                <address class="mt-2 not-italic text-muted-foreground-1">
                  280 Suzanne Throughway,<br>
                  Breannabury, OR 45801,<br>
                  United States<br>
                </address>
              </div>

<div class="sm:text-end space-y-2">
                
                <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
                  <dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Invoice date:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">03/10/2018</dd>
                  </dl>
                  <dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Due date:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">03/11/2018</dd>
                  </dl>
                </div>
                
              </div>
              
            </div>

<div class="mt-6">
              <div class="border border-line-2 p-4 rounded-lg space-y-4">
                <div class="hidden sm:grid sm:grid-cols-5">
                  <div class="sm:col-span-2 text-xs font-medium text-muted-foreground-1 uppercase">Item</div>
                  <div class="text-start text-xs font-medium text-muted-foreground-1 uppercase">Qty</div>
                  <div class="text-start text-xs font-medium text-muted-foreground-1 uppercase">Rate</div>
                  <div class="text-end text-xs font-medium text-muted-foreground-1 uppercase">Amount</div>
                </div>

<div class="hidden sm:block border-b border-line-2"></div>
          
                <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
                  <div class="col-span-full sm:col-span-2">
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
                    <p class="font-medium text-foreground">Design UX and UI</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
                    <p class="text-foreground">1</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
                    <p class="text-foreground">5</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
                    <p class="sm:text-end text-foreground">$500</p>
                  </div>
                </div>

<div class="sm:hidden border-b border-line-2"></div>
          
                <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
                  <div class="col-span-full sm:col-span-2">
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
                    <p class="font-medium text-foreground">Web project</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
                    <p class="text-foreground">1</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
                    <p class="text-foreground">24</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
                    <p class="sm:text-end text-foreground">$1250</p>
                  </div>
                </div>

<div class="sm:hidden border-b border-line-2"></div>
          
                <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
                  <div class="col-span-full sm:col-span-2">
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
                    <p class="font-medium text-foreground">SEO</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
                    <p class="text-foreground">1</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
                    <p class="text-foreground">6</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
                    <p class="sm:text-end text-foreground">$2000</p>
                  </div>
                </div>
              </div>
            </div>

<div class="mt-8 flex sm:justify-end">
              <div class="w-full max-w-2xl sm:text-end space-y-2">
                
                <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
                  <dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Subtotal:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">$2750.00</dd>
                  </dl>

<dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Total:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">$2750.00</dd>
                  </dl>

<dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Amount paid:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">$2789.00</dd>
                  </dl>

<dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Due balance:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">$0.00</dd>
                  </dl>
                </div>
                
              </div>
            </div>

<div class="mt-8 sm:mt-12">
              <h4 class="text-lg font-semibold text-foreground">Thank you!</h4>
              <p class="text-muted-foreground-1">If you have any questions concerning this invoice, use the following contact information:</p>
              <div class="mt-2">
                <p class="block text-sm font-medium text-foreground">example@site.com</p>
                <p class="block text-sm font-medium text-foreground">+1 (062) 109-9222</p>
              </div>
            </div>

<div class="mt-6 flex justify-end gap-x-3">
            <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm 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" href="#">
            <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
              Invoice PDF
            </a>
            <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
              <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"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
              Print
            </a>
          </div>
          
        </div>
      </div>