30 Modern CSS Pricing Tables for Websites – Responsive Pricing Section Examples

Pricing tables are one of the most important conversion-focused sections on a modern website. A clear pricing section helps visitors compare plans, understand the value of each offer, and choose the option that fits their needs without confusion.

In this guide, you will find 30 modern CSS pricing tables for websites, including responsive pricing cards, SaaS pricing sections, monthly and yearly pricing toggles, comparison tables, agency pricing layouts, hosting pricing tables, mobile-first pricing sections, and complete HTML and CSS pricing table examples you can customize for your own projects.

What Is a CSS Pricing Table?

A CSS pricing table is a website section that presents pricing plans, package options, product tiers, or subscription levels in a clear visual layout. Most pricing tables include a plan name, price, billing period, feature list, and call-to-action button so visitors can quickly compare offers and choose the best option.

Modern CSS pricing tables are commonly used on SaaS websites, agency service pages, hosting websites, membership platforms, app landing pages, ecommerce service pages, and productized service websites. They can be built as traditional tables, responsive pricing cards, comparison grids, or complete pricing sections with headings, badges, toggles, and trust signals.

Why Pricing Tables Matter for Website Conversions

A pricing table is not just a design element. It is one of the key decision-making sections on a website. When the pricing section is easy to scan, users can understand the difference between plans faster and move toward the next step with more confidence.

• They make plan comparison easier by placing prices and features side by side.
• They highlight the recommended offer with visual emphasis, badges, or stronger CTA buttons.
• They reduce pricing confusion by showing what is included in each plan.
• They improve call-to-action visibility by placing buttons directly inside each pricing card.
• They support responsive website design when pricing cards stack cleanly on mobile screens.

Pricing Tables vs Pricing Cards vs Comparison Tables

Pricing tables, pricing cards, and comparison tables are closely related, but they are not always the same thing. Choosing the right structure depends on how many plans you have, how many features need to be compared, and how much detail your visitors need before they click a button.

If you are designing pricing cards as part of a larger UI system, you may also like our guide to modern CSS cards. For full page structures, landing page sections, and responsive grids, see our collection of modern CSS layouts. If your pricing section depends heavily on call-to-action design, our modern CSS buttons guide is also useful.

What Should a Good Pricing Table Include?

A good pricing table should make the buying decision easier, not harder. The best pricing sections use simple wording, clear plan differences, visible prices, and strong call-to-action buttons. They also work well on mobile, where users often need to compare pricing cards one at a time.

• Plan name so users understand the level or package type.
• Price and billing period such as monthly, yearly, one-time, or custom pricing.
• Short plan description that explains who the plan is for.
• Feature list with the most important included items.
• Recommended plan highlight when one plan should stand out.
• Clear CTA button such as Start Free Trial, Choose Plan, Buy Now, or Contact Sales.
• Trust signal such as money-back guarantee, secure checkout, no hidden fees, or cancel anytime.
• Responsive layout that keeps the pricing table readable on desktop, tablet, and mobile screens.

The examples below show different ways to build modern CSS pricing tables, from simple HTML and CSS pricing cards to more advanced responsive pricing sections with toggles, badges, comparison layouts, icons, trust signals, and mobile-first structures.

30 Modern CSS Pricing Table Examples

Now let’s look at 30 modern CSS pricing table examples for real website projects. Each example has a different purpose and layout approach, so you can use them for SaaS websites, service pages, hosting offers, ecommerce packages, membership plans, agency pricing, app landing pages, product pricing, and complete responsive pricing sections.

1. Basic CSS Pricing Table

Basic CSS pricing tables are perfect when you need a clean and familiar way to compare three pricing plans. This layout works well for SaaS websites, service pages, digital products, membership plans, and simple website pricing sections.

The example below uses a classic three-column pricing table with plan names, prices, short descriptions, feature lists, and call-to-action buttons. It is simple, responsive, and easy to customize with your own colors, plans, and pricing content.

• Great starting point for a modern HTML and CSS pricing table
• Uses a clean three-column layout on desktop
• Stacks into a single column on mobile screens
• Includes plan names, prices, features, and CTA buttons
• Works well for simple pricing pages and landing pages

HTML

<section class="basic-pricing-table">

  <div class="basic-pricing-table-header">
    <div class="basic-pricing-table-kicker">Simple Pricing</div>
    <h3 class="basic-pricing-table-title">Choose the right <span>website plan</span></h3>
    <p class="basic-pricing-table-text">A clean pricing table makes it easier for visitors to compare options, understand the value, and choose the plan that fits their needs.</p>
  </div>

  <div class="basic-pricing-table-grid">

    <article class="basic-pricing-table-card">
      <h4 class="basic-pricing-table-plan">Starter</h4>
      <p class="basic-pricing-table-desc">For small websites and personal projects that need a simple launch package.</p>
      <div class="basic-pricing-table-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <ul class="basic-pricing-table-features">
        <li>One website project</li>
        <li>Basic design sections</li>
        <li>Email support</li>
        <li>Responsive layout</li>
      </ul>
      <a class="basic-pricing-table-button" href="#">Choose Starter</a>
    </article>

    <article class="basic-pricing-table-card">
      <h4 class="basic-pricing-table-plan">Business</h4>
      <p class="basic-pricing-table-desc">For growing companies that need stronger features and a more polished website.</p>
      <div class="basic-pricing-table-price">
        <strong>$49</strong>
        <span>/mo</span>
      </div>
      <ul class="basic-pricing-table-features">
        <li>Up to five projects</li>
        <li>Advanced page sections</li>
        <li>Priority support</li>
        <li>Conversion-focused UI</li>
      </ul>
      <a class="basic-pricing-table-button" href="#">Choose Business</a>
    </article>

    <article class="basic-pricing-table-card">
      <h4 class="basic-pricing-table-plan">Premium</h4>
      <p class="basic-pricing-table-desc">For teams that need more flexibility, custom layouts, and premium support.</p>
      <div class="basic-pricing-table-price">
        <strong>$89</strong>
        <span>/mo</span>
      </div>
      <ul class="basic-pricing-table-features">
        <li>Unlimited projects</li>
        <li>Custom design blocks</li>
        <li>Dedicated support</li>
        <li>Full responsive system</li>
      </ul>
      <a class="basic-pricing-table-button" href="#">Choose Premium</a>
    </article>

  </div>

</section>

CSS

.basic-pricing-table{
width:min(100%,980px);
}

.basic-pricing-table-header{
max-width:680px;
margin:0 auto 32px;
text-align:center;
}

.basic-pricing-table-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0e7ff;
color:#3730a3;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.basic-pricing-table-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,56px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.basic-pricing-table-title span{
background:linear-gradient(135deg,#2563eb,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.basic-pricing-table-text{
margin:0 auto;
max-width:620px;
color:#475569;
font-size:16px;
line-height:1.75;
}

.basic-pricing-table-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.basic-pricing-table-card{
display:flex;
flex-direction:column;
padding:26px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.10);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.basic-pricing-table-card:hover{
transform:translateY(-5px);
box-shadow:0 28px 70px rgba(15,23,42,.14);
border-color:rgba(37,99,235,.24);
}

.basic-pricing-table-plan{
margin:0 0 8px;
color:#0f172a;
font-size:22px;
line-height:1.2;
font-weight:950;
}

.basic-pricing-table-desc{
margin:0 0 22px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.basic-pricing-table-price{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:20px;
color:#0f172a;
}

.basic-pricing-table-price strong{
font-size:46px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.basic-pricing-table-price span{
padding-bottom:4px;
color:#64748b;
font-size:14px;
font-weight:800;
}

.basic-pricing-table-features{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.basic-pricing-table-features li{
position:relative;
margin:0;
padding-left:28px;
color:#334155;
font-size:15px;
line-height:1.5;
font-weight:700;
}

.basic-pricing-table-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
}

.basic-pricing-table-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
margin-top:auto;
min-height:48px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.basic-pricing-table-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.25);
}

@media (max-width:860px){
.basic-pricing-table-grid{
grid-template-columns:1fr;
max-width:520px;
margin:0 auto;
}
}

@media (max-width:640px){
.basic-pricing-table-header{
text-align:left;
}

.basic-pricing-table-title{
font-size:34px;
}

.basic-pricing-table-card{
padding:22px;
border-radius:24px;
}

.basic-pricing-table-price strong{
font-size:40px;
}
}

This basic CSS pricing table is a strong foundation for simple pricing pages. You can use it as a starting point and then adjust the plan names, prices, feature lists, and button styles to match your website or product.

2. Responsive Pricing Cards

Responsive pricing cards are a modern alternative to a strict table layout. Instead of feeling like a spreadsheet, each pricing plan becomes a separate card with its own visual hierarchy, feature list, and call-to-action area.

This example uses a flexible card grid with top badges, short descriptions, feature groups, and bottom CTA zones. It is designed to look polished on desktop while staying easy to read on tablets and mobile screens.

• Uses responsive CSS Grid for modern pricing cards
• Each card has a clear top, middle, and bottom section
• Works well for SaaS, services, memberships, and digital products
• Includes a highlighted middle card without relying only on color
• Mobile layout keeps every pricing card easy to scan

HTML

<section class="responsive-pricing-cards">

  <div class="responsive-pricing-cards-header">
    <div>
      <div class="responsive-pricing-cards-kicker">Responsive Cards</div>
      <h3 class="responsive-pricing-cards-title">Pricing cards built for <span>every screen size</span></h3>
    </div>
    <p class="responsive-pricing-cards-note">Use this structure when each plan needs its own card, clear CTA area, and readable mobile layout.</p>
  </div>

  <div class="responsive-pricing-cards-grid">

    <article class="responsive-pricing-card">
      <div class="responsive-pricing-card-badge">
        <span>Launch</span>
        <strong>01</strong>
      </div>
      <h3>Basic</h3>
      <p class="responsive-pricing-card-desc">A focused plan for simple websites, small launches, and early-stage projects.</p>
      <div class="responsive-pricing-card-price">
        <strong>$29</strong>
        <span>/month</span>
      </div>
      <ul class="responsive-pricing-card-list">
        <li>Responsive pricing card layout</li>
        <li>Core website sections</li>
        <li>Basic support included</li>
        <li>Clean HTML and CSS structure</li>
      </ul>
      <div class="responsive-pricing-card-footer">
        <a class="responsive-pricing-card-button" href="#">Start Basic</a>
        <p class="responsive-pricing-card-small">Best for simple projects</p>
      </div>
    </article>

    <article class="responsive-pricing-card is-featured">
      <div class="responsive-pricing-card-badge">
        <span>Popular</span>
        <strong>02</strong>
      </div>
      <h3>Growth</h3>
      <p class="responsive-pricing-card-desc">A stronger plan for businesses that need better conversion sections and more flexibility.</p>
      <div class="responsive-pricing-card-price">
        <strong>$79</strong>
        <span>/month</span>
      </div>
      <ul class="responsive-pricing-card-list">
        <li>Advanced responsive pricing UI</li>
        <li>Conversion-focused sections</li>
        <li>Priority support included</li>
        <li>Reusable design components</li>
      </ul>
      <div class="responsive-pricing-card-footer">
        <a class="responsive-pricing-card-button" href="#">Start Growth</a>
        <p class="responsive-pricing-card-small">Recommended for most websites</p>
      </div>
    </article>

    <article class="responsive-pricing-card">
      <div class="responsive-pricing-card-badge">
        <span>Scale</span>
        <strong>03</strong>
      </div>
      <h3>Advanced</h3>
      <p class="responsive-pricing-card-desc">A flexible plan for teams, larger websites, and more complex landing page systems.</p>
      <div class="responsive-pricing-card-price">
        <strong>$149</strong>
        <span>/month</span>
      </div>
      <ul class="responsive-pricing-card-list">
        <li>Complete pricing section system</li>
        <li>Custom layouts and components</li>
        <li>Dedicated design support</li>
        <li>Scalable responsive structure</li>
      </ul>
      <div class="responsive-pricing-card-footer">
        <a class="responsive-pricing-card-button" href="#">Start Advanced</a>
        <p class="responsive-pricing-card-small">Best for scaling teams</p>
      </div>
    </article>

  </div>

</section>

CSS

.responsive-pricing-cards{
width:min(100%,1060px);
}

.responsive-pricing-cards-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.responsive-pricing-cards-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(56,189,248,.14);
border:1px solid rgba(125,211,252,.22);
color:#bae6fd;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.responsive-pricing-cards-title{
margin:0;
max-width:650px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.responsive-pricing-cards-title span{
background:linear-gradient(90deg,#38bdf8,#a78bfa,#34d399);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.responsive-pricing-cards-note{
max-width:300px;
margin:0;
padding:16px 18px;
border-radius:22px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.20);
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.responsive-pricing-cards-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.responsive-pricing-card{
position:relative;
display:flex;
flex-direction:column;
min-height:100%;
padding:22px;
border-radius:30px;
background:rgba(15,23,42,.78);
border:1px solid rgba(148,163,184,.24);
box-shadow:0 24px 70px rgba(0,0,0,.28);
overflow:hidden;
transition:transform .22s ease,border-color .22s ease,background .22s ease;
}

.responsive-pricing-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 42%);
opacity:.75;
pointer-events:none;
}

.responsive-pricing-card:hover{
transform:translateY(-6px);
border-color:rgba(56,189,248,.52);
background:rgba(15,23,42,.92);
}

.responsive-pricing-card.is-featured{
border-color:rgba(56,189,248,.72);
background:
linear-gradient(135deg,rgba(14,165,233,.20),rgba(124,58,237,.18)),
rgba(15,23,42,.92);
transform:translateY(-10px);
}

.responsive-pricing-card-badge{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:22px;
}

.responsive-pricing-card-badge span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(148,163,184,.18);
color:#dbeafe;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.responsive-pricing-card-badge strong{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:999px;
background:rgba(56,189,248,.14);
color:#7dd3fc;
font-size:16px;
font-weight:950;
}

.responsive-pricing-card h3{
position:relative;
z-index:2;
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:25px;
line-height:1.18;
font-weight:950;
}

.responsive-pricing-card-desc{
position:relative;
z-index:2;
min-height:72px;
margin:0 0 22px;
color:#cbd5e1;
font-size:14px;
line-height:1.65;
}

.responsive-pricing-card-price{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:22px;
color:#ffffff;
}

.responsive-pricing-card-price strong{
font-size:48px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.responsive-pricing-card-price span{
padding-bottom:5px;
color:#94a3b8;
font-size:14px;
font-weight:800;
}

.responsive-pricing-card-list{
position:relative;
z-index:2;
display:grid;
gap:12px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.responsive-pricing-card-list li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#e2e8f0;
font-size:14px;
line-height:1.5;
font-weight:700;
}

.responsive-pricing-card-list li::before{
content:"";
flex:0 0 auto;
width:9px;
height:9px;
margin-top:6px;
border-radius:999px;
background:linear-gradient(135deg,#38bdf8,#34d399);
box-shadow:0 0 0 4px rgba(56,189,248,.10);
}

.responsive-pricing-card-footer{
position:relative;
z-index:2;
display:grid;
gap:10px;
margin-top:auto;
padding-top:20px;
border-top:1px solid rgba(148,163,184,.18);
}

.responsive-pricing-card-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
border-radius:999px;
background:#ffffff;
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease;
}

.responsive-pricing-card-button:hover{
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
transform:translateY(-2px);
box-shadow:0 18px 40px rgba(255,255,255,.16);
}

.responsive-pricing-card.is-featured .responsive-pricing-card-button{
background:linear-gradient(135deg,#38bdf8,#34d399);
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
}

.responsive-pricing-card-small{
margin:0;
color:#94a3b8;
font-size:12px;
line-height:1.5;
text-align:center;
font-weight:700;
}

@media (max-width:920px){
.responsive-pricing-cards-header{
grid-template-columns:1fr;
}

.responsive-pricing-cards-note{
max-width:100%;
}

.responsive-pricing-cards-grid{
grid-template-columns:1fr;
max-width:540px;
margin:0 auto;
}

.responsive-pricing-card.is-featured{
transform:none;
}
}

@media (max-width:640px){
.responsive-pricing-cards-title{
font-size:34px;
}

.responsive-pricing-card{
padding:20px;
border-radius:24px;
}

.responsive-pricing-card-desc{
min-height:auto;
}

.responsive-pricing-card-price strong{
font-size:40px;
}
}

This responsive pricing cards example is useful when you want a more modern and flexible pricing section than a traditional table. The card-based structure gives each plan enough space while still keeping the whole pricing section easy to compare.

3. SaaS Pricing Table

SaaS pricing tables usually need to do more than show prices. They must explain subscription tiers, guide visitors toward the best plan, and make the upgrade path clear for different business sizes.

This example uses a SaaS-style pricing section with a horizontal value summary, three subscription plans, usage-based limits, and a highlighted growth plan. It is designed for software products, AI tools, dashboards, online platforms, and subscription-based web apps.

• Designed for SaaS products, dashboards, AI tools, and subscription platforms
• Includes usage limits such as users, projects, storage, and automation
• Uses a highlighted middle plan for the recommended subscription
• Includes a short value summary above the pricing cards
• Responsive layout works on desktop, tablet, and mobile screens

HTML

<section class="saas-pricing-table">

  <div class="saas-pricing-table-hero">

    <div class="saas-pricing-table-copy">
      <div class="saas-pricing-table-kicker">SaaS Pricing</div>
      <h3 class="saas-pricing-table-title">Scale your product with <span>flexible plans</span></h3>
      <p class="saas-pricing-table-text">This SaaS pricing table helps users compare subscriptions by price, usage limits, included features, and the best plan for growing teams.</p>
    </div>

    <div class="saas-pricing-table-summary">
      <div class="saas-pricing-table-summary-item">
        <strong>14 days</strong>
        <span>Free trial included with every paid plan</span>
      </div>
      <div class="saas-pricing-table-summary-item">
        <strong>No setup</strong>
        <span>Start instantly without onboarding fees</span>
      </div>
      <div class="saas-pricing-table-summary-item">
        <strong>Cancel</strong>
        <span>Change or cancel your plan anytime</span>
      </div>
    </div>

  </div>

  <div class="saas-pricing-table-grid">

    <article class="saas-pricing-plan">
      <h4 class="saas-pricing-plan-name">Starter</h4>
      <p class="saas-pricing-plan-desc">For solo founders and small teams testing a new product workflow.</p>
      <div class="saas-pricing-plan-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <div class="saas-pricing-plan-limits">
        <div class="saas-pricing-plan-limit">
          <strong>3</strong>
          <span>Users</span>
        </div>
        <div class="saas-pricing-plan-limit">
          <strong>10GB</strong>
          <span>Storage</span>
        </div>
      </div>
      <ul class="saas-pricing-plan-features">
        <li>Basic analytics dashboard</li>
        <li>Three connected projects</li>
        <li>Email support</li>
        <li>Core automation tools</li>
      </ul>
      <a class="saas-pricing-plan-button" href="#">Start Trial</a>
    </article>

    <article class="saas-pricing-plan is-recommended">
      <div class="saas-pricing-plan-ribbon">Popular</div>
      <h4 class="saas-pricing-plan-name">Growth</h4>
      <p class="saas-pricing-plan-desc">For growing SaaS teams that need more automation and better reporting.</p>
      <div class="saas-pricing-plan-price">
        <strong>$59</strong>
        <span>/mo</span>
      </div>
      <div class="saas-pricing-plan-limits">
        <div class="saas-pricing-plan-limit">
          <strong>15</strong>
          <span>Users</span>
        </div>
        <div class="saas-pricing-plan-limit">
          <strong>100GB</strong>
          <span>Storage</span>
        </div>
      </div>
      <ul class="saas-pricing-plan-features">
        <li>Advanced analytics dashboard</li>
        <li>Unlimited active projects</li>
        <li>Priority support</li>
        <li>Automation workflows</li>
      </ul>
      <a class="saas-pricing-plan-button" href="#">Start Growth</a>
    </article>

    <article class="saas-pricing-plan">
      <h4 class="saas-pricing-plan-name">Scale</h4>
      <p class="saas-pricing-plan-desc">For larger teams that need custom permissions, support, and higher limits.</p>
      <div class="saas-pricing-plan-price">
        <strong>$129</strong>
        <span>/mo</span>
      </div>
      <div class="saas-pricing-plan-limits">
        <div class="saas-pricing-plan-limit">
          <strong>50</strong>
          <span>Users</span>
        </div>
        <div class="saas-pricing-plan-limit">
          <strong>1TB</strong>
          <span>Storage</span>
        </div>
      </div>
      <ul class="saas-pricing-plan-features">
        <li>Custom team permissions</li>
        <li>Advanced integrations</li>
        <li>Dedicated support</li>
        <li>Enterprise-ready workflows</li>
      </ul>
      <a class="saas-pricing-plan-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.saas-pricing-table{
width:min(100%,1080px);
}

.saas-pricing-table-hero{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:24px;
align-items:stretch;
margin-bottom:22px;
}

.saas-pricing-table-copy{
padding:30px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 48px rgba(15,23,42,.08);
}

.saas-pricing-table-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#e0e7ff;
color:#3730a3;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.saas-pricing-table-title{
margin:0 0 14px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.saas-pricing-table-title span{
background:linear-gradient(135deg,#4f46e5,#0891b2);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.saas-pricing-table-text{
max-width:650px;
margin:0;
color:#475569;
font-size:16px;
line-height:1.75;
}

.saas-pricing-table-summary{
display:grid;
gap:12px;
padding:18px;
border-radius:30px;
background:#0f172a;
box-shadow:0 22px 60px rgba(15,23,42,.22);
}

.saas-pricing-table-summary-item{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.saas-pricing-table-summary-item strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:24px;
line-height:1;
font-weight:950;
}

.saas-pricing-table-summary-item span{
display:block;
color:#cbd5e1;
font-size:13px;
font-weight:800;
line-height:1.5;
}

.saas-pricing-table-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.saas-pricing-plan{
position:relative;
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.09);
overflow:hidden;
}

.saas-pricing-plan.is-recommended{
border-color:rgba(79,70,229,.34);
box-shadow:0 28px 80px rgba(79,70,229,.18);
}

.saas-pricing-plan-ribbon{
position:absolute;
top:18px;
right:18px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#4f46e5;
color:#ffffff;
font-size:12px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.saas-pricing-plan-name{
margin:0 0 8px;
padding-right:92px;
color:#0f172a;
font-size:22px;
line-height:1.2;
font-weight:950;
}

.saas-pricing-plan-desc{
min-height:66px;
margin:0 0 20px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.saas-pricing-plan-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:18px;
color:#0f172a;
}

.saas-pricing-plan-price strong{
font-size:46px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.saas-pricing-plan-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.saas-pricing-plan-limits{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.saas-pricing-plan-limit{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.saas-pricing-plan-limit strong{
display:block;
margin-bottom:3px;
color:#111827;
font-size:16px;
line-height:1;
font-weight:950;
}

.saas-pricing-plan-limit span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:800;
}

.saas-pricing-plan-features{
display:grid;
gap:11px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.saas-pricing-plan-features li{
position:relative;
margin:0;
padding-left:26px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.saas-pricing-plan-features li::before{
content:"";
position:absolute;
left:0;
top:7px;
width:10px;
height:10px;
border-radius:999px;
background:#4f46e5;
box-shadow:0 0 0 4px rgba(79,70,229,.12);
}

.saas-pricing-plan-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.saas-pricing-plan-button:hover{
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 36px rgba(79,70,229,.25);
}

.saas-pricing-plan.is-recommended .saas-pricing-plan-button{
background:linear-gradient(135deg,#4f46e5,#0891b2);
box-shadow:0 16px 34px rgba(79,70,229,.20);
}

@media (max-width:960px){
.saas-pricing-table-hero{
grid-template-columns:1fr;
}

.saas-pricing-table-summary{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.saas-pricing-table-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.saas-pricing-table-copy{
padding:22px;
border-radius:24px;
}

.saas-pricing-table-title{
font-size:34px;
}

.saas-pricing-table-summary{
grid-template-columns:1fr;
}

.saas-pricing-plan{
padding:20px;
border-radius:24px;
}

.saas-pricing-plan-desc{
min-height:auto;
}

.saas-pricing-plan-limits{
grid-template-columns:1fr;
}
}

This SaaS pricing table example is useful when your pricing plans include usage limits, product tiers, and subscription-based features. The layout gives users more context before they compare the individual plans.

4. Featured Plan Pricing Table

Featured plan pricing tables are useful when one plan should receive more attention than the others. This is common on SaaS websites, hosting pages, membership websites, and service-based pricing sections where the middle plan is often the best fit for most customers.

This example does not rely only on color to highlight the recommended plan. It uses a larger center card, a top label, stronger CTA placement, extra trust text, and a different layout rhythm so the featured plan feels intentionally more important.

• Designed to guide users toward one recommended pricing plan
• Uses scale, badge placement, CTA contrast, and content hierarchy
• Works well for SaaS, hosting, subscriptions, and service packages
• Middle plan receives stronger emphasis without making other plans unclear
• Responsive layout removes the desktop offset on smaller screens

HTML

<section class="featured-plan-pricing">

  <div class="featured-plan-pricing-header">
    <div class="featured-plan-pricing-kicker">Featured Plan</div>
    <h3 class="featured-plan-pricing-title">Highlight the plan most users <span>should choose</span></h3>
    <p class="featured-plan-pricing-text">Use this pricing table when one plan is the best fit for most visitors and needs stronger visual emphasis than the other offers.</p>
  </div>

  <div class="featured-plan-pricing-grid">

    <article class="featured-plan-card">
      <div class="featured-plan-topline">
        <span class="featured-plan-label">Basic</span>
      </div>
      <h4 class="featured-plan-name">Starter</h4>
      <p class="featured-plan-desc">For smaller projects that need a clean launch package and essential features.</p>
      <div class="featured-plan-price">
        <strong>$24</strong>
        <span>/mo</span>
      </div>
      <p class="featured-plan-subnote">Simple setup for new websites.</p>
      <ul class="featured-plan-features">
        <li>One active website</li>
        <li>Basic responsive sections</li>
        <li>Email support</li>
        <li>Standard updates</li>
      </ul>
      <a class="featured-plan-button" href="#">Choose Starter</a>
    </article>

    <article class="featured-plan-card is-main">
      <div class="featured-plan-topline">
        <span class="featured-plan-label">Most Popular</span>
        <span class="featured-plan-save">Save 20%</span>
      </div>
      <h4 class="featured-plan-name">Professional</h4>
      <p class="featured-plan-desc">For growing businesses that need better design, stronger conversion sections, and priority support.</p>
      <div class="featured-plan-price">
        <strong>$64</strong>
        <span>/mo</span>
      </div>
      <p class="featured-plan-subnote">Best value for most websites.</p>
      <ul class="featured-plan-features">
        <li>Up to ten active pages</li>
        <li>Conversion-focused sections</li>
        <li>Priority support</li>
        <li>Advanced responsive UI</li>
      </ul>
      <a class="featured-plan-button" href="#">Choose Professional</a>
    </article>

    <article class="featured-plan-card">
      <div class="featured-plan-topline">
        <span class="featured-plan-label">Advanced</span>
      </div>
      <h4 class="featured-plan-name">Enterprise</h4>
      <p class="featured-plan-desc">For larger projects that need custom sections, more flexibility, and dedicated support.</p>
      <div class="featured-plan-price">
        <strong>$119</strong>
        <span>/mo</span>
      </div>
      <p class="featured-plan-subnote">Built for teams and scaling brands.</p>
      <ul class="featured-plan-features">
        <li>Unlimited page sections</li>
        <li>Custom pricing components</li>
        <li>Dedicated support</li>
        <li>Advanced design system</li>
      </ul>
      <a class="featured-plan-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="featured-plan-trust">
    <span>✓</span>
    No hidden fees. Upgrade, downgrade, or cancel your plan anytime.
  </div>

</section>

CSS

.featured-plan-pricing{
width:min(100%,1040px);
}

.featured-plan-pricing-header{
max-width:720px;
margin:0 auto 34px;
text-align:center;
}

.featured-plan-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.featured-plan-pricing-title{
margin:0 0 12px;
color:#111827;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.featured-plan-pricing-title span{
color:#ea580c;
}

.featured-plan-pricing-text{
max-width:650px;
margin:0 auto;
color:#57534e;
font-size:16px;
line-height:1.75;
}

.featured-plan-pricing-grid{
display:grid;
grid-template-columns:.92fr 1.16fr .92fr;
gap:18px;
align-items:center;
}

.featured-plan-card{
position:relative;
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(120,53,15,.10);
}

.featured-plan-card.is-main{
padding:30px;
border:2px solid rgba(249,115,22,.54);
box-shadow:0 30px 90px rgba(249,115,22,.22);
}

.featured-plan-topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.featured-plan-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.featured-plan-card.is-main .featured-plan-label{
background:linear-gradient(135deg,#f97316,#f43f5e);
color:#ffffff;
}

.featured-plan-save{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#ecfdf5;
color:#047857;
font-size:12px;
font-weight:950;
}

.featured-plan-name{
margin:0 0 8px;
color:#111827;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.featured-plan-desc{
min-height:70px;
margin:0 0 22px;
color:#57534e;
font-size:14px;
line-height:1.65;
}

.featured-plan-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:8px;
color:#111827;
}

.featured-plan-price strong{
font-size:50px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.featured-plan-card.is-main .featured-plan-price strong{
font-size:60px;
}

.featured-plan-price span{
padding-bottom:6px;
color:#78716c;
font-size:14px;
font-weight:850;
}

.featured-plan-subnote{
margin:0 0 24px;
color:#9a3412;
font-size:13px;
font-weight:850;
line-height:1.5;
}

.featured-plan-features{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.featured-plan-features li{
position:relative;
margin:0;
padding-left:28px;
color:#292524;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.featured-plan-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#ffedd5;
color:#ea580c;
font-size:12px;
font-weight:950;
}

.featured-plan-card.is-main .featured-plan-features li::before{
background:#ea580c;
color:#ffffff;
}

.featured-plan-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#292524;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.featured-plan-button:hover{
background:#ea580c;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(249,115,22,.22);
}

.featured-plan-card.is-main .featured-plan-button{
min-height:54px;
background:linear-gradient(135deg,#f97316,#f43f5e);
box-shadow:0 16px 36px rgba(249,115,22,.24);
}

.featured-plan-trust{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:26px;
padding:14px 18px;
border-radius:999px;
background:rgba(255,255,255,.76);
border:1px solid rgba(249,115,22,.18);
color:#57534e;
font-size:14px;
line-height:1.4;
font-weight:850;
text-align:center;
}

.featured-plan-trust span{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:999px;
background:#ecfdf5;
color:#047857;
font-size:13px;
font-weight:950;
}

@media (max-width:940px){
.featured-plan-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.featured-plan-card.is-main{
padding:24px;
}
}

@media (max-width:640px){
.featured-plan-pricing-header{
text-align:left;
}

.featured-plan-pricing-title{
font-size:34px;
}

.featured-plan-card{
padding:20px;
border-radius:24px;
}

.featured-plan-card.is-main{
padding:20px;
}

.featured-plan-desc{
min-height:auto;
}

.featured-plan-card.is-main .featured-plan-price strong,
.featured-plan-price strong{
font-size:42px;
}

.featured-plan-trust{
align-items:flex-start;
border-radius:22px;
}
}

This featured plan pricing table is useful when you want to guide visitors toward the best-value plan without hiding the other options. The layout uses size, spacing, a badge, stronger CTA styling, and trust text to make the recommended plan stand out.

5. Dark Mode Pricing Table

Dark mode pricing tables work especially well for SaaS products, AI tools, developer platforms, hosting websites, dashboards, and modern landing pages. A dark pricing section can make prices, CTA buttons, badges, and plan differences feel more premium and focused.

This example uses a dark interface with a wide top intro, three pricing plans, glowing feature accents, and a bottom trust row. The structure is different from a basic pricing table because the design feels more like a premium product section than a simple card grid.

• Perfect for SaaS, AI tools, developer products, and hosting websites
• Uses a premium dark UI with soft glowing background accents
• Includes a separate trust row below the pricing cards
• Highlights the main plan with border, badge, and stronger CTA button
• Responsive layout stacks cleanly on smaller screens

HTML

<section class="dark-mode-pricing">

  <div class="dark-mode-pricing-top">
    <div>
      <div class="dark-mode-pricing-kicker">Dark Pricing UI</div>
      <h3 class="dark-mode-pricing-title">Premium plans for a <span>modern product</span></h3>
      <p class="dark-mode-pricing-text">A dark mode pricing table can make your offer feel focused, polished, and high-value while keeping plan comparison simple.</p>
    </div>
    <div class="dark-mode-pricing-side-note">All plans include responsive components, secure hosting-ready layouts, and clean HTML/CSS structure for fast customization.</div>
  </div>

  <div class="dark-mode-pricing-grid">

    <article class="dark-mode-pricing-card">
      <div class="dark-mode-pricing-card-head">
        <div class="dark-mode-pricing-plan-icon">S</div>
        <span class="dark-mode-pricing-badge">Start</span>
      </div>
      <h3>Solo</h3>
      <p class="dark-mode-pricing-desc">For individual creators and small projects that need a modern pricing section.</p>
      <div class="dark-mode-pricing-price">
        <strong>$18</strong>
        <span>/mo</span>
      </div>
      <ul class="dark-mode-pricing-features">
        <li>One active project</li>
        <li>Basic pricing components</li>
        <li>Email support</li>
        <li>Responsive card layout</li>
      </ul>
      <a class="dark-mode-pricing-button" href="#">Choose Solo</a>
    </article>

    <article class="dark-mode-pricing-card is-featured">
      <div class="dark-mode-pricing-card-head">
        <div class="dark-mode-pricing-plan-icon">P</div>
        <span class="dark-mode-pricing-badge">Best Value</span>
      </div>
      <h3>Professional</h3>
      <p class="dark-mode-pricing-desc">For growing websites that need stronger conversion sections and better design flexibility.</p>
      <div class="dark-mode-pricing-price">
        <strong>$58</strong>
        <span>/mo</span>
      </div>
      <ul class="dark-mode-pricing-features">
        <li>Unlimited landing sections</li>
        <li>Advanced pricing layouts</li>
        <li>Priority support</li>
        <li>Conversion-focused CTA areas</li>
      </ul>
      <a class="dark-mode-pricing-button" href="#">Start Professional</a>
    </article>

    <article class="dark-mode-pricing-card">
      <div class="dark-mode-pricing-card-head">
        <div class="dark-mode-pricing-plan-icon">T</div>
        <span class="dark-mode-pricing-badge">Team</span>
      </div>
      <h3>Studio</h3>
      <p class="dark-mode-pricing-desc">For teams that need scalable layouts, reusable UI systems, and premium support.</p>
      <div class="dark-mode-pricing-price">
        <strong>$128</strong>
        <span>/mo</span>
      </div>
      <ul class="dark-mode-pricing-features">
        <li>Team-ready design system</li>
        <li>Custom pricing sections</li>
        <li>Dedicated support</li>
        <li>Advanced responsive layouts</li>
      </ul>
      <a class="dark-mode-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="dark-mode-pricing-trust">
    <div class="dark-mode-pricing-trust-item">
      <strong>Secure checkout</strong>
      Protected payment experience for every plan.
    </div>
    <div class="dark-mode-pricing-trust-item">
      <strong>Cancel anytime</strong>
      Flexible billing without long-term lock-in.
    </div>
    <div class="dark-mode-pricing-trust-item">
      <strong>Fast setup</strong>
      Launch your pricing page faster with reusable CSS.
    </div>
  </div>

</section>

CSS

.dark-mode-pricing{
width:min(100%,1080px);
}

.dark-mode-pricing-top{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:24px;
align-items:end;
margin-bottom:26px;
}

.dark-mode-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(129,140,248,.14);
border:1px solid rgba(165,180,252,.22);
color:#c7d2fe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.dark-mode-pricing-title{
margin:0 0 14px;
max-width:720px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.dark-mode-pricing-title span{
background:linear-gradient(90deg,#60a5fa,#c084fc,#22d3ee);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.dark-mode-pricing-text{
max-width:650px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.dark-mode-pricing-side-note{
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.22);
color:#dbeafe;
font-size:14px;
line-height:1.65;
font-weight:750;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.dark-mode-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.dark-mode-pricing-card{
position:relative;
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:rgba(15,23,42,.78);
border:1px solid rgba(148,163,184,.22);
box-shadow:0 24px 80px rgba(0,0,0,.28);
overflow:hidden;
}

.dark-mode-pricing-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 42%);
opacity:.7;
pointer-events:none;
}

.dark-mode-pricing-card.is-featured{
border-color:rgba(96,165,250,.72);
background:
linear-gradient(135deg,rgba(37,99,235,.22),rgba(124,58,237,.18)),
rgba(15,23,42,.94);
box-shadow:0 30px 90px rgba(37,99,235,.20);
}

.dark-mode-pricing-card-head{
position:relative;
z-index:2;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:22px;
}

.dark-mode-pricing-plan-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:16px;
background:rgba(96,165,250,.14);
border:1px solid rgba(147,197,253,.20);
color:#93c5fd;
font-size:20px;
font-weight:950;
}

.dark-mode-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.dark-mode-pricing-card.is-featured .dark-mode-pricing-badge{
background:linear-gradient(135deg,#60a5fa,#a78bfa);
color:#020617;
}

.dark-mode-pricing-card h3{
position:relative;
z-index:2;
margin:0 0 9px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.dark-mode-pricing-desc{
position:relative;
z-index:2;
min-height:70px;
margin:0 0 22px;
color:#cbd5e1;
font-size:14px;
line-height:1.65;
}

.dark-mode-pricing-price{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:22px;
color:#ffffff;
}

.dark-mode-pricing-price strong{
font-size:50px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.dark-mode-pricing-price span{
padding-bottom:5px;
color:#94a3b8;
font-size:14px;
font-weight:850;
}

.dark-mode-pricing-features{
position:relative;
z-index:2;
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.dark-mode-pricing-features li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#e2e8f0;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.dark-mode-pricing-features li::before{
content:"";
flex:0 0 auto;
width:18px;
height:18px;
margin-top:1px;
border-radius:999px;
background:
radial-gradient(circle at center,#ffffff 0 2px,transparent 3px),
linear-gradient(135deg,#60a5fa,#a78bfa);
box-shadow:0 0 0 4px rgba(96,165,250,.10);
}

.dark-mode-pricing-button{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
margin-top:auto;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.dark-mode-pricing-button:hover{
background:rgba(255,255,255,.16);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 18px 42px rgba(0,0,0,.28);
}

.dark-mode-pricing-card.is-featured .dark-mode-pricing-button{
background:linear-gradient(135deg,#60a5fa,#a78bfa);
border-color:transparent;
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
}

.dark-mode-pricing-trust{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:18px;
}

.dark-mode-pricing-trust-item{
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.06);
border:1px solid rgba(148,163,184,.18);
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:800;
}

.dark-mode-pricing-trust-item strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:15px;
font-weight:950;
}

@media (max-width:960px){
.dark-mode-pricing-top{
grid-template-columns:1fr;
}

.dark-mode-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.dark-mode-pricing-trust{
grid-template-columns:1fr;
max-width:560px;
margin-left:auto;
margin-right:auto;
}
}

@media (max-width:640px){
.dark-mode-pricing-title{
font-size:34px;
}

.dark-mode-pricing-card{
padding:20px;
border-radius:24px;
}

.dark-mode-pricing-desc{
min-height:auto;
}

.dark-mode-pricing-price strong{
font-size:42px;
}
}

This dark mode pricing table is a strong choice for modern digital products where the pricing section should feel premium. The layout combines strong contrast, glowing accents, clear CTA buttons, and trust signals without making the comparison harder to read.

6. Gradient Pricing Cards

Gradient pricing cards are useful when you want a pricing section to feel more energetic, visual, and brand-driven. Instead of using only plain white cards, each plan has a gradient header area that separates the plan identity from the feature list.

This example uses a split card structure: a gradient top section for the plan name and price, and a clean white lower section for features and the CTA. This makes the pricing cards easy to scan while still creating a more memorable visual design.

• Uses gradient card headers instead of plain pricing cards
• Separates price, plan identity, features, and CTA into clear zones
• Works well for creative services, SaaS plans, and app landing pages
• Each pricing card has a unique visual identity without changing the layout logic
• Responsive grid stacks into readable cards on mobile screens

HTML

<section class="gradient-pricing-cards">

  <div class="gradient-pricing-cards-header">
    <div>
      <div class="gradient-pricing-cards-kicker">Gradient Cards</div>
      <h3 class="gradient-pricing-cards-title">Make each plan feel <span>distinct and memorable</span></h3>
    </div>
    <p class="gradient-pricing-cards-note">Gradient headers help separate plan identity from feature details while keeping the pricing cards easy to compare.</p>
  </div>

  <div class="gradient-pricing-cards-grid">

    <article class="gradient-pricing-card is-pink">
      <div class="gradient-pricing-card-top">
        <div>
          <div class="gradient-pricing-card-label">
            <span>Creative</span>
            <strong>01</strong>
          </div>
          <h3>Launch</h3>
          <p class="gradient-pricing-card-desc">For creators and small brands that need a polished first pricing page.</p>
        </div>
        <div class="gradient-pricing-card-price">
          <strong>$25</strong>
          <span>/mo</span>
        </div>
      </div>
      <div class="gradient-pricing-card-bottom">
        <ul class="gradient-pricing-card-features">
          <li>Responsive pricing section</li>
          <li>Three editable pricing cards</li>
          <li>Clean CSS structure</li>
          <li>Basic CTA styling</li>
        </ul>
        <a class="gradient-pricing-card-button" href="#">Choose Launch</a>
      </div>
    </article>

    <article class="gradient-pricing-card is-blue">
      <div class="gradient-pricing-card-top">
        <div>
          <div class="gradient-pricing-card-label">
            <span>Business</span>
            <strong>02</strong>
          </div>
          <h3>Growth</h3>
          <p class="gradient-pricing-card-desc">For businesses that want a stronger pricing section with clearer conversion focus.</p>
        </div>
        <div class="gradient-pricing-card-price">
          <strong>$75</strong>
          <span>/mo</span>
        </div>
      </div>
      <div class="gradient-pricing-card-bottom">
        <ul class="gradient-pricing-card-features">
          <li>Advanced feature layout</li>
          <li>Highlighted CTA button</li>
          <li>Trust-focused copy blocks</li>
          <li>Mobile-friendly structure</li>
        </ul>
        <a class="gradient-pricing-card-button" href="#">Choose Growth</a>
      </div>
    </article>

    <article class="gradient-pricing-card is-purple">
      <div class="gradient-pricing-card-top">
        <div>
          <div class="gradient-pricing-card-label">
            <span>Premium</span>
            <strong>03</strong>
          </div>
          <h3>Scale</h3>
          <p class="gradient-pricing-card-desc">For teams that need more visual impact and a scalable pricing card system.</p>
        </div>
        <div class="gradient-pricing-card-price">
          <strong>$135</strong>
          <span>/mo</span>
        </div>
      </div>
      <div class="gradient-pricing-card-bottom">
        <ul class="gradient-pricing-card-features">
          <li>Reusable card components</li>
          <li>Premium gradient styling</li>
          <li>Custom pricing content</li>
          <li>Priority design support</li>
        </ul>
        <a class="gradient-pricing-card-button" href="#">Choose Scale</a>
      </div>
    </article>

  </div>

</section>

CSS

.gradient-pricing-cards{
width:min(100%,1060px);
}

.gradient-pricing-cards-header{
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:24px;
align-items:end;
margin-bottom:30px;
}

.gradient-pricing-cards-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fce7f3;
color:#be185d;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.gradient-pricing-cards-title{
max-width:720px;
margin:0;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.gradient-pricing-cards-title span{
background:linear-gradient(135deg,#ec4899,#7c3aed,#0ea5e9);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.gradient-pricing-cards-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.gradient-pricing-cards-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.gradient-pricing-card{
display:flex;
flex-direction:column;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.10);
overflow:hidden;
transition:transform .22s ease,box-shadow .22s ease;
}

.gradient-pricing-card:hover{
transform:translateY(-6px);
box-shadow:0 30px 80px rgba(15,23,42,.14);
}

.gradient-pricing-card-top{
position:relative;
padding:26px;
min-height:230px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
}

.gradient-pricing-card-top::before{
content:"";
position:absolute;
inset:auto -40px -70px auto;
width:160px;
height:160px;
border-radius:999px;
background:rgba(255,255,255,.16);
pointer-events:none;
}

.gradient-pricing-card.is-pink .gradient-pricing-card-top{
background:linear-gradient(135deg,#ec4899,#f97316);
}

.gradient-pricing-card.is-blue .gradient-pricing-card-top{
background:linear-gradient(135deg,#2563eb,#06b6d4);
}

.gradient-pricing-card.is-purple .gradient-pricing-card-top{
background:linear-gradient(135deg,#7c3aed,#db2777);
}

.gradient-pricing-card-label{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:26px;
}

.gradient-pricing-card-label span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.22);
color:#ffffff;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.gradient-pricing-card-label strong{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:999px;
background:rgba(255,255,255,.18);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.gradient-pricing-card h3{
position:relative;
z-index:2;
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:26px;
line-height:1.15;
font-weight:950;
}

.gradient-pricing-card-desc{
position:relative;
z-index:2;
margin:0;
color:rgba(255,255,255,.86);
font-size:14px;
line-height:1.6;
font-weight:650;
}

.gradient-pricing-card-price{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:7px;
margin-top:24px;
color:#ffffff;
}

.gradient-pricing-card-price strong{
font-size:52px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.gradient-pricing-card-price span{
padding-bottom:5px;
color:rgba(255,255,255,.78);
font-size:14px;
font-weight:850;
}

.gradient-pricing-card-bottom{
display:flex;
flex-direction:column;
flex:1;
padding:24px;
}

.gradient-pricing-card-features{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.gradient-pricing-card-features li{
position:relative;
margin:0;
padding-left:28px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.gradient-pricing-card-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#f1f5f9;
color:#2563eb;
font-size:12px;
font-weight:950;
}

.gradient-pricing-card-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease;
}

.gradient-pricing-card.is-pink .gradient-pricing-card-button{
background:linear-gradient(135deg,#ec4899,#f97316);
box-shadow:0 16px 34px rgba(236,72,153,.20);
}

.gradient-pricing-card.is-blue .gradient-pricing-card-button{
background:linear-gradient(135deg,#2563eb,#06b6d4);
box-shadow:0 16px 34px rgba(37,99,235,.20);
}

.gradient-pricing-card.is-purple .gradient-pricing-card-button{
background:linear-gradient(135deg,#7c3aed,#db2777);
box-shadow:0 16px 34px rgba(124,58,237,.20);
}

.gradient-pricing-card-button:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 20px 42px rgba(15,23,42,.18);
}

@media (max-width:920px){
.gradient-pricing-cards-header{
grid-template-columns:1fr;
}

.gradient-pricing-cards-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.gradient-pricing-cards-title{
font-size:34px;
}

.gradient-pricing-card{
border-radius:24px;
}

.gradient-pricing-card-top,
.gradient-pricing-card-bottom{
padding:22px;
}

.gradient-pricing-card-top{
min-height:210px;
}

.gradient-pricing-card-price strong{
font-size:42px;
}
}

This gradient pricing cards example is useful when your pricing section needs more visual energy without losing clarity. The split-card structure keeps the plan identity and price visually strong while keeping the features and CTA easy to read.

7. Glassmorphism Pricing Table

Glassmorphism pricing tables are useful when you want a pricing section that feels modern, soft, and layered. Instead of using standard solid cards, this design uses translucent panels, blurred backgrounds, subtle borders, and floating depth.

This example uses a split pricing layout: the left side explains the offer and includes trust points, while the right side displays stacked pricing plans inside glass-style panels. This makes the design feel different from a normal three-column pricing card layout.

• Uses a split glassmorphism layout instead of a standard card grid
• Left panel explains the offer and builds trust before the pricing choices
• Right panel uses stacked pricing rows with translucent glass effects
• Featured plan is highlighted with position, glow, and stronger CTA styling
• Responsive layout stacks naturally on mobile without losing readability

HTML

<section class="glass-pricing">

  <div class="glass-pricing-shell">

    <div class="glass-pricing-intro">
      <div>
        <div class="glass-pricing-kicker">Glass Pricing</div>
        <h3 class="glass-pricing-title">Transparent pricing with a <span>premium feel</span></h3>
        <p class="glass-pricing-text">Use this glassmorphism pricing table when you want a modern pricing section with depth, trust, and a softer visual style.</p>
      </div>

      <div class="glass-pricing-proof">
        <div class="glass-pricing-proof-item">
          <span class="glass-pricing-proof-icon">✓</span>
          <div>
            <strong>No hidden fees</strong>
            <span>Every plan shows the main price and included features clearly.</span>
          </div>
        </div>

        <div class="glass-pricing-proof-item">
          <span class="glass-pricing-proof-icon">✓</span>
          <div>
            <strong>Cancel anytime</strong>
            <span>Flexible billing makes the pricing section feel safer to click.</span>
          </div>
        </div>
      </div>
    </div>

    <div class="glass-pricing-list">

      <article class="glass-pricing-row">
        <div class="glass-pricing-row-main">
          <div class="glass-pricing-row-top">
            <h3>Starter Glass</h3>
            <span class="glass-pricing-tag">Small teams</span>
          </div>
          <p>A simple plan for small websites, portfolio projects, and early-stage landing pages.</p>
          <div class="glass-pricing-meta">
            <span>3 pages</span>
            <span>Email support</span>
            <span>Basic UI</span>
          </div>
        </div>
        <div class="glass-pricing-row-side">
          <div class="glass-pricing-price">
            <strong>$19</strong>
            <span>per month</span>
          </div>
          <a class="glass-pricing-button" href="#">Choose</a>
        </div>
      </article>

      <article class="glass-pricing-row is-featured">
        <div class="glass-pricing-row-main">
          <div class="glass-pricing-row-top">
            <h3>Growth Glass</h3>
            <span class="glass-pricing-tag">Recommended</span>
          </div>
          <p>The best choice for modern websites that need better conversion sections and more flexible pricing UI.</p>
          <div class="glass-pricing-meta">
            <span>12 pages</span>
            <span>Priority support</span>
            <span>Advanced UI</span>
          </div>
        </div>
        <div class="glass-pricing-row-side">
          <div class="glass-pricing-price">
            <strong>$59</strong>
            <span>per month</span>
          </div>
          <a class="glass-pricing-button" href="#">Start now</a>
        </div>
      </article>

      <article class="glass-pricing-row">
        <div class="glass-pricing-row-main">
          <div class="glass-pricing-row-top">
            <h3>Scale Glass</h3>
            <span class="glass-pricing-tag">Custom</span>
          </div>
          <p>A flexible plan for larger websites, product pages, and custom pricing section requirements.</p>
          <div class="glass-pricing-meta">
            <span>Unlimited pages</span>
            <span>Custom support</span>
            <span>Design system</span>
          </div>
        </div>
        <div class="glass-pricing-row-side">
          <div class="glass-pricing-price">
            <strong>$129</strong>
            <span>per month</span>
          </div>
          <a class="glass-pricing-button" href="#">Contact</a>
        </div>
      </article>

    </div>

  </div>

</section>

CSS

.glass-pricing{
width:min(100%,1060px);
position:relative;
}

.glass-pricing-shell{
display:grid;
grid-template-columns:.95fr 1.25fr;
gap:22px;
padding:22px;
border-radius:36px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
box-shadow:
0 34px 100px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter:blur(22px);
}

.glass-pricing-intro{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:520px;
padding:28px;
border-radius:28px;
background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.14);
}

.glass-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(125,211,252,.14);
border:1px solid rgba(125,211,252,.24);
color:#bae6fd;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.glass-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.glass-pricing-title span{
background:linear-gradient(90deg,#7dd3fc,#c4b5fd,#86efac);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.glass-pricing-text{
margin:0;
color:#dbeafe;
font-size:16px;
line-height:1.75;
}

.glass-pricing-proof{
display:grid;
gap:12px;
margin-top:30px;
}

.glass-pricing-proof-item{
display:flex;
gap:12px;
align-items:flex-start;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.glass-pricing-proof-icon{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:30px;
height:30px;
border-radius:999px;
background:rgba(34,197,94,.14);
color:#86efac;
font-size:14px;
font-weight:950;
}

.glass-pricing-proof-item strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:14px;
font-weight:950;
}

.glass-pricing-proof-item span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.45;
font-weight:700;
}

.glass-pricing-list{
display:grid;
gap:14px;
align-content:center;
}

.glass-pricing-row{
position:relative;
display:grid;
grid-template-columns:1fr auto;
gap:18px;
align-items:center;
padding:20px;
border-radius:26px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
transition:transform .22s ease,border-color .22s ease,background .22s ease;
}

.glass-pricing-row:hover{
transform:translateX(4px);
background:rgba(255,255,255,.14);
border-color:rgba(125,211,252,.34);
}

.glass-pricing-row.is-featured{
padding:24px;
background:
linear-gradient(135deg,rgba(14,165,233,.24),rgba(168,85,247,.18)),
rgba(255,255,255,.12);
border-color:rgba(125,211,252,.48);
box-shadow:
0 24px 70px rgba(14,165,233,.18),
inset 0 1px 0 rgba(255,255,255,.12);
}

.glass-pricing-row-main{
min-width:0;
}

.glass-pricing-row-top{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
margin-bottom:10px;
}

.glass-pricing-row h3{
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.2;
font-weight:950;
}

.glass-pricing-tag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.12);
color:#dbeafe;
font-size:11px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.glass-pricing-row.is-featured .glass-pricing-tag{
background:#ffffff;
color:#0f172a;
}

.glass-pricing-row p{
margin:0;
max-width:440px;
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.glass-pricing-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}

.glass-pricing-meta span{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
background:rgba(15,23,42,.28);
color:#e0f2fe;
font-size:12px;
font-weight:800;
}

.glass-pricing-row-side{
display:grid;
justify-items:end;
gap:12px;
min-width:150px;
}

.glass-pricing-price{
text-align:right;
color:#ffffff;
}

.glass-pricing-price strong{
display:block;
font-size:38px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.glass-pricing-price span{
display:block;
margin-top:6px;
color:#cbd5e1;
font-size:13px;
font-weight:850;
}

.glass-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}

.glass-pricing-button:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
background:rgba(255,255,255,.18);
transform:translateY(-2px);
}

.glass-pricing-row.is-featured .glass-pricing-button{
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
border-color:#ffffff;
}

@media (max-width:940px){
.glass-pricing-shell{
grid-template-columns:1fr;
}

.glass-pricing-intro{
min-height:auto;
}

.glass-pricing-row{
grid-template-columns:1fr;
}

.glass-pricing-row-side{
justify-items:start;
min-width:0;
}

.glass-pricing-price{
text-align:left;
}
}

@media (max-width:640px){
.glass-pricing-shell{
padding:14px;
border-radius:28px;
}

.glass-pricing-intro{
padding:22px;
border-radius:22px;
}

.glass-pricing-title{
font-size:34px;
}

.glass-pricing-row,
.glass-pricing-row.is-featured{
padding:18px;
border-radius:22px;
}

.glass-pricing-price strong{
font-size:34px;
}
}

This glassmorphism pricing table is useful when you want a pricing section that feels more layered than a standard card grid. The split structure makes the offer explanation, trust points, and pricing choices feel connected inside one premium interface.

8. Minimal Pricing Table

Minimal pricing tables are useful when clarity matters more than decoration. This type of pricing layout works well for consultants, agencies, freelancers, productized services, and simple SaaS offers where users need to compare plans quickly.

This example avoids large pricing cards completely. Instead, it uses a clean horizontal pricing list where each plan appears as a structured row. The result feels closer to a premium service menu or editorial comparison layout than a typical pricing card section.

• Uses horizontal pricing rows instead of traditional pricing cards
• Best for clean websites, service menus, consultants, and agencies
• Creates a minimalist pricing section with strong typography and spacing
• Each row includes plan details, key features, price, and CTA button
• Mobile layout stacks each row into a compact readable pricing block

HTML

<section class="minimal-pricing-table">

  <div class="minimal-pricing-table-header">
    <div>
      <p class="minimal-pricing-table-kicker">Minimal Pricing</p>
      <h3 class="minimal-pricing-table-title">Simple plans, clear details, no visual noise.</h3>
    </div>
    <p class="minimal-pricing-table-note">A minimal pricing table works best when visitors need to compare practical service packages without heavy decoration or complex card layouts.</p>
  </div>

  <div class="minimal-pricing-rows">

    <article class="minimal-pricing-row">
      <div class="minimal-pricing-plan">
        <h3>Essential</h3>
        <p>For simple websites and early-stage service pages.</p>
      </div>
      <ul class="minimal-pricing-features">
        <li>Landing page</li>
        <li>Responsive CSS</li>
        <li>Basic sections</li>
      </ul>
      <div class="minimal-pricing-price">
        <strong>$300</strong>
        <span>one-time</span>
      </div>
      <a class="minimal-pricing-button" href="#">Select</a>
    </article>

    <article class="minimal-pricing-row is-highlighted">
      <div class="minimal-pricing-plan">
        <h3>Business</h3>
        <p>For growing brands that need a stronger conversion-focused website.</p>
      </div>
      <ul class="minimal-pricing-features">
        <li>Multi-page layout</li>
        <li>Pricing section</li>
        <li>CTA system</li>
        <li>SEO structure</li>
      </ul>
      <div class="minimal-pricing-price">
        <strong>$900</strong>
        <span>one-time</span>
      </div>
      <a class="minimal-pricing-button" href="#">Select</a>
    </article>

    <article class="minimal-pricing-row">
      <div class="minimal-pricing-plan">
        <h3>Custom</h3>
        <p>For larger websites, special UI components, and custom integrations.</p>
      </div>
      <ul class="minimal-pricing-features">
        <li>Custom design</li>
        <li>Advanced layouts</li>
        <li>Priority support</li>
      </ul>
      <div class="minimal-pricing-price">
        <strong>Quote</strong>
        <span>project-based</span>
      </div>
      <a class="minimal-pricing-button" href="#">Contact</a>
    </article>

  </div>

</section>

CSS

.minimal-pricing-table{
width:min(100%,1060px);
padding:34px;
border-radius:0;
background:#ffffff;
border:1px solid rgba(28,25,23,.10);
box-shadow:0 24px 70px rgba(28,25,23,.08);
}

.minimal-pricing-table-header{
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:34px;
align-items:end;
padding-bottom:30px;
border-bottom:1px solid rgba(28,25,23,.14);
}

.minimal-pricing-table-kicker{
margin:0 0 12px;
color:#78716c;
font-size:12px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
}

.minimal-pricing-table-title{
margin:0;
max-width:650px;
color:#1c1917;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.minimal-pricing-table-note{
margin:0;
color:#57534e;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.minimal-pricing-rows{
display:grid;
}

.minimal-pricing-row{
display:grid;
grid-template-columns:1.05fr 1.25fr 170px 150px;
gap:22px;
align-items:center;
padding:28px 0;
border-bottom:1px solid rgba(28,25,23,.12);
}

.minimal-pricing-row:last-child{
border-bottom:0;
padding-bottom:0;
}

.minimal-pricing-plan{
min-width:0;
}

.minimal-pricing-plan h3{
margin:0 0 8px;
color:#1c1917;
font-size:24px;
line-height:1.18;
font-weight:950;
letter-spacing:-.025em;
}

.minimal-pricing-plan p{
margin:0;
max-width:260px;
color:#78716c;
font-size:14px;
line-height:1.55;
font-weight:650;
}

.minimal-pricing-features{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0;
padding:0;
list-style:none;
}

.minimal-pricing-features li{
display:inline-flex;
align-items:center;
margin:0;
padding:8px 10px;
border-radius:999px;
background:#f5f5f4;
color:#44403c;
font-size:12px;
line-height:1;
font-weight:850;
}

.minimal-pricing-price{
text-align:right;
color:#1c1917;
}

.minimal-pricing-price strong{
display:block;
font-size:36px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.minimal-pricing-price span{
display:block;
margin-top:5px;
color:#78716c;
font-size:13px;
font-weight:800;
}

.minimal-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 18px;
border-radius:0;
background:#1c1917;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:background .22s ease,transform .22s ease;
}

.minimal-pricing-button:hover{
background:#57534e;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
}

.minimal-pricing-row.is-highlighted{
position:relative;
}

.minimal-pricing-row.is-highlighted::before{
content:"Recommended";
position:absolute;
top:18px;
left:0;
transform:translateY(-50%);
padding:6px 9px;
background:#1c1917;
color:#ffffff;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.minimal-pricing-row.is-highlighted .minimal-pricing-plan h3{
padding-top:10px;
}

@media (max-width:960px){
.minimal-pricing-table-header{
grid-template-columns:1fr;
gap:16px;
}

.minimal-pricing-row{
grid-template-columns:1fr;
gap:16px;
align-items:start;
}

.minimal-pricing-plan p{
max-width:100%;
}

.minimal-pricing-price{
text-align:left;
}

.minimal-pricing-button{
width:max-content;
}
}

@media (max-width:640px){
.minimal-pricing-table{
padding:24px;
}

.minimal-pricing-table-title{
font-size:34px;
}

.minimal-pricing-row{
padding:26px 0;
}

.minimal-pricing-button{
width:100%;
}

.minimal-pricing-row.is-highlighted::before{
position:static;
display:inline-flex;
width:max-content;
margin-bottom:12px;
transform:none;
}
}

This minimal pricing table is useful when you want pricing to feel direct, editorial, and professional. The horizontal row structure is especially helpful for service pricing, consultant packages, and simple offers where a heavy card design would feel unnecessary.

9. Pricing Table with Monthly/Yearly Toggle

Pricing tables with monthly and yearly toggles are common on SaaS websites, subscription platforms, AI tools, hosting pages, and membership websites. They let visitors compare short-term and long-term billing without leaving the pricing section.

This example uses a centered pricing switch, dynamic prices, annual savings labels, and a balanced three-plan layout. Unlike a static pricing table, the JavaScript updates the visible price and billing period when users switch between monthly and yearly billing.

• Includes a monthly/yearly pricing toggle
• Uses JavaScript to update prices and billing labels
• Shows annual savings badges for yearly plans
• Useful for SaaS, memberships, hosting, and subscription products
• Responsive layout keeps the toggle and pricing cards clear on mobile

HTML

<section class="toggle-pricing" data-billing="monthly">

  <div class="toggle-pricing-header">
    <div class="toggle-pricing-kicker">Billing Toggle</div>
    <h3 class="toggle-pricing-title">Switch between <span>monthly and yearly</span> pricing</h3>
    <p class="toggle-pricing-text">A pricing toggle helps visitors compare subscription plans and see how much they can save with annual billing.</p>
  </div>

  <div class="toggle-pricing-switch-wrap">
    <span class="toggle-pricing-switch-label">Billing:</span>
    <div class="toggle-pricing-switch" role="group" aria-label="Billing period">
      <button class="toggle-pricing-monthly" type="button">Monthly</button>
      <button class="toggle-pricing-yearly" type="button">Yearly</button>
    </div>
    <span class="toggle-pricing-save">Save up to 20%</span>
  </div>

  <div class="toggle-pricing-grid">

    <article class="toggle-pricing-card">
      <div class="toggle-pricing-card-top">
        <h3>Starter</h3>
      </div>
      <p class="toggle-pricing-card-desc">For simple projects, personal sites, and early product ideas.</p>
      <div class="toggle-pricing-price">
        <strong data-monthly="19" data-yearly="15">$19</strong>
        <span data-period>/mo</span>
      </div>
      <p class="toggle-pricing-year-note" data-note></p>
      <ul class="toggle-pricing-features">
        <li>One project workspace</li>
        <li>Basic pricing UI components</li>
        <li>Email support</li>
        <li>Responsive layout</li>
      </ul>
      <a class="toggle-pricing-button" href="#">Start Starter</a>
    </article>

    <article class="toggle-pricing-card is-featured">
      <div class="toggle-pricing-card-top">
        <h3>Growth</h3>
        <span class="toggle-pricing-badge">Popular</span>
      </div>
      <p class="toggle-pricing-card-desc">For growing websites that need more sections, better UX, and stronger conversion elements.</p>
      <div class="toggle-pricing-price">
        <strong data-monthly="59" data-yearly="47">$59</strong>
        <span data-period>/mo</span>
      </div>
      <p class="toggle-pricing-year-note" data-note></p>
      <ul class="toggle-pricing-features">
        <li>Unlimited website sections</li>
        <li>Advanced pricing layouts</li>
        <li>Priority support</li>
        <li>CTA-focused components</li>
      </ul>
      <a class="toggle-pricing-button" href="#">Start Growth</a>
    </article>

    <article class="toggle-pricing-card">
      <div class="toggle-pricing-card-top">
        <h3>Scale</h3>
      </div>
      <p class="toggle-pricing-card-desc">For teams, larger websites, advanced landing pages, and custom UI systems.</p>
      <div class="toggle-pricing-price">
        <strong data-monthly="129" data-yearly="103">$129</strong>
        <span data-period>/mo</span>
      </div>
      <p class="toggle-pricing-year-note" data-note></p>
      <ul class="toggle-pricing-features">
        <li>Custom pricing sections</li>
        <li>Reusable design system</li>
        <li>Dedicated support</li>
        <li>Advanced responsive UI</li>
      </ul>
      <a class="toggle-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.toggle-pricing{
width:min(100%,1060px);
}

.toggle-pricing-header{
max-width:720px;
margin:0 auto 24px;
text-align:center;
}

.toggle-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.toggle-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.toggle-pricing-title span{
background:linear-gradient(135deg,#2563eb,#10b981);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.toggle-pricing-text{
max-width:620px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
}

.toggle-pricing-switch-wrap{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin:0 0 28px;
}

.toggle-pricing-switch-label{
color:#334155;
font-size:14px;
font-weight:900;
}

.toggle-pricing-switch{
position:relative;
display:inline-grid;
grid-template-columns:1fr 1fr;
width:260px;
padding:6px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 38px rgba(15,23,42,.10);
}

.toggle-pricing-switch::before{
content:"";
position:absolute;
top:6px;
left:6px;
width:calc(50% - 6px);
height:calc(100% - 12px);
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#10b981);
box-shadow:0 10px 24px rgba(37,99,235,.22);
transition:transform .24s ease;
}

.toggle-pricing.is-yearly .toggle-pricing-switch::before{
transform:translateX(100%);
}

.toggle-pricing-switch button{
position:relative;
z-index:2;
cursor:pointer;
border:0;
background:transparent;
min-height:42px;
border-radius:999px;
color:#475569;
font-size:14px;
font-weight:950;
line-height:1;
}

.toggle-pricing:not(.is-yearly) .toggle-pricing-monthly,
.toggle-pricing.is-yearly .toggle-pricing-yearly{
color:#ffffff;
}

.toggle-pricing-save{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
white-space:nowrap;
}

.toggle-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.toggle-pricing-card{
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.09);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.toggle-pricing-card:hover{
transform:translateY(-5px);
box-shadow:0 28px 70px rgba(15,23,42,.13);
border-color:rgba(37,99,235,.22);
}

.toggle-pricing-card.is-featured{
border:2px solid rgba(37,99,235,.45);
box-shadow:0 28px 80px rgba(37,99,235,.16);
}

.toggle-pricing-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.toggle-pricing-card h3{
margin:0;
color:#0f172a;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.toggle-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:12px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.toggle-pricing-card-desc{
min-height:68px;
margin:0 0 22px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.toggle-pricing-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:8px;
color:#0f172a;
}

.toggle-pricing-price strong{
font-size:52px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.toggle-pricing-price span{
padding-bottom:6px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.toggle-pricing-year-note{
min-height:20px;
margin:0 0 22px;
color:#15803d;
font-size:13px;
font-weight:900;
line-height:1.45;
}

.toggle-pricing-features{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.toggle-pricing-features li{
position:relative;
margin:0;
padding-left:28px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.toggle-pricing-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#dbeafe;
color:#2563eb;
font-size:12px;
font-weight:950;
}

.toggle-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.toggle-pricing-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 36px rgba(37,99,235,.24);
}

.toggle-pricing-card.is-featured .toggle-pricing-button{
background:linear-gradient(135deg,#2563eb,#10b981);
box-shadow:0 16px 36px rgba(37,99,235,.22);
}

@media (max-width:920px){
.toggle-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.toggle-pricing-header{
text-align:left;
}

.toggle-pricing-title{
font-size:34px;
}

.toggle-pricing-switch-wrap{
flex-direction:column;
align-items:stretch;
}

.toggle-pricing-switch{
width:100%;
}

.toggle-pricing-save{
width:100%;
}

.toggle-pricing-card{
padding:20px;
border-radius:24px;
}

.toggle-pricing-card-desc{
min-height:auto;
}

.toggle-pricing-price strong{
font-size:42px;
}
}

JavaScript

document.querySelectorAll(".toggle-pricing").forEach(function(section){
const monthlyButton=section.querySelector(".toggle-pricing-monthly");
const yearlyButton=section.querySelector(".toggle-pricing-yearly");
const priceItems=section.querySelectorAll("[data-monthly]");
const periods=section.querySelectorAll("[data-period]");
const notes=section.querySelectorAll("[data-note]");

function setBilling(type){
const isYearly=type==="yearly";
section.classList.toggle("is-yearly",isYearly);
section.setAttribute("data-billing",type);

priceItems.forEach(function(price){
const value=isYearly ? price.getAttribute("data-yearly") : price.getAttribute("data-monthly");
price.textContent="$"+value;
});

periods.forEach(function(period){
period.textContent=isYearly ? "/mo billed yearly" : "/mo";
});

notes.forEach(function(note){
note.textContent=isYearly ? "Annual billing discount applied." : "";
});
}

monthlyButton.addEventListener("click",function(){
setBilling("monthly");
});

yearlyButton.addEventListener("click",function(){
setBilling("yearly");
});
});

This pricing table with a monthly and yearly toggle is useful for subscription-based websites where annual billing should feel like a clear upgrade. The interactive switch makes the pricing section more practical than a static table.

10. Annual Discount Pricing Table

Annual discount pricing tables are useful when you want to push visitors toward yearly billing without hiding the monthly option. This type of pricing section should make the savings feel obvious, but still keep the plan comparison simple.

This example uses a different layout from a normal card grid. A large discount panel sits on the left, while the right side presents annual plan options as compact comparison blocks. This creates a stronger promotional section for yearly subscriptions.

• Promotes annual billing with a large savings panel
• Uses compact plan blocks instead of equal pricing cards
• Good for SaaS, memberships, hosting, and subscription products
• Separates promotional copy from the actual plan comparison
• Responsive layout stacks the discount offer above the plans on mobile

HTML

<section class="annual-discount-pricing">

  <div class="annual-discount-offer">
    <div class="annual-discount-offer-content">
      <div class="annual-discount-kicker">Annual Deal</div>
      <h3 class="annual-discount-title">Save more with <span>yearly billing</span></h3>
      <p class="annual-discount-text">Use this layout when you want annual billing to feel like a strong offer, not just a small note below the price.</p>
    </div>

    <div class="annual-discount-offer-bottom">
      <div class="annual-discount-number">
        <strong>2 months</strong>
        <span>Free when customers choose an annual plan instead of monthly billing.</span>
      </div>
      <p class="annual-discount-note">Simple annual pricing can improve commitment while keeping the comparison easy to understand.</p>
    </div>
  </div>

  <div class="annual-discount-plans">

    <article class="annual-discount-plan">
      <div class="annual-discount-plan-main">
        <div class="annual-discount-plan-top">
          <h3>Starter Annual</h3>
          <span class="annual-discount-plan-badge">Save $38</span>
        </div>
        <p>For small projects that need a simple responsive pricing section and basic support.</p>
        <div class="annual-discount-features">
          <span>1 project</span>
          <span>Basic UI</span>
          <span>Email support</span>
        </div>
      </div>
      <div class="annual-discount-side">
        <div class="annual-discount-price">
          <del>$228</del>
          <strong>$190</strong>
          <span>per year</span>
        </div>
        <a class="annual-discount-button" href="#">Choose</a>
      </div>
    </article>

    <article class="annual-discount-plan is-featured">
      <div class="annual-discount-plan-main">
        <div class="annual-discount-plan-top">
          <h3>Growth Annual</h3>
          <span class="annual-discount-plan-badge">Best annual value</span>
        </div>
        <p>For growing websites that need conversion-focused sections, priority support, and flexible pricing UI.</p>
        <div class="annual-discount-features">
          <span>Unlimited sections</span>
          <span>Priority support</span>
          <span>Advanced UI</span>
        </div>
      </div>
      <div class="annual-discount-side">
        <div class="annual-discount-price">
          <del>$708</del>
          <strong>$590</strong>
          <span>per year</span>
        </div>
        <a class="annual-discount-button" href="#">Choose</a>
      </div>
    </article>

    <article class="annual-discount-plan">
      <div class="annual-discount-plan-main">
        <div class="annual-discount-plan-top">
          <h3>Scale Annual</h3>
          <span class="annual-discount-plan-badge">Save $258</span>
        </div>
        <p>For larger teams that need a reusable design system, custom pricing sections, and dedicated support.</p>
        <div class="annual-discount-features">
          <span>Custom UI</span>
          <span>Design system</span>
          <span>Dedicated support</span>
        </div>
      </div>
      <div class="annual-discount-side">
        <div class="annual-discount-price">
          <del>$1548</del>
          <strong>$1290</strong>
          <span>per year</span>
        </div>
        <a class="annual-discount-button" href="#">Contact</a>
      </div>
    </article>

  </div>

</section>

CSS

.annual-discount-pricing{
width:min(100%,1080px);
display:grid;
grid-template-columns:380px minmax(0,1fr);
gap:20px;
align-items:stretch;
}

.annual-discount-offer{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:560px;
padding:30px;
border-radius:34px;
background:#111827;
color:#ffffff;
overflow:hidden;
box-shadow:0 28px 80px rgba(17,24,39,.24);
}

.annual-discount-offer::before{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:240px;
height:240px;
border-radius:999px;
background:rgba(234,179,8,.26);
}

.annual-discount-offer::after{
content:"";
position:absolute;
left:-80px;
bottom:-80px;
width:220px;
height:220px;
border-radius:999px;
background:rgba(249,115,22,.20);
}

.annual-discount-offer-content,
.annual-discount-offer-bottom{
position:relative;
z-index:2;
}

.annual-discount-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(234,179,8,.16);
border:1px solid rgba(253,224,71,.22);
color:#fde68a;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.annual-discount-title{
margin:0 0 18px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(38px,5vw,68px);
line-height:.94;
font-weight:950;
letter-spacing:-.075em;
}

.annual-discount-title span{
display:block;
color:#facc15;
-webkit-text-fill-color:#facc15;
}

.annual-discount-text{
margin:0;
color:#e5e7eb;
font-size:16px;
line-height:1.75;
}

.annual-discount-number{
display:grid;
gap:8px;
margin-top:34px;
padding:22px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.annual-discount-number strong{
color:#ffffff;
font-size:58px;
line-height:.9;
font-weight:950;
letter-spacing:-.065em;
}

.annual-discount-number span{
color:#fde68a;
font-size:14px;
line-height:1.5;
font-weight:850;
}

.annual-discount-note{
margin:18px 0 0;
color:#d1d5db;
font-size:13px;
line-height:1.5;
font-weight:750;
}

.annual-discount-plans{
display:grid;
gap:14px;
align-content:stretch;
}

.annual-discount-plan{
display:grid;
grid-template-columns:1fr auto;
gap:18px;
align-items:center;
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.annual-discount-plan.is-featured{
border-color:rgba(234,179,8,.54);
box-shadow:0 26px 74px rgba(234,179,8,.16);
}

.annual-discount-plan-main{
min-width:0;
}

.annual-discount-plan-top{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:9px;
}

.annual-discount-plan h3{
margin:0;
color:#111827;
font-size:23px;
line-height:1.18;
font-weight:950;
}

.annual-discount-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#fef3c7;
color:#92400e;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.annual-discount-plan p{
margin:0;
max-width:460px;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.annual-discount-features{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}

.annual-discount-features span{
display:inline-flex;
align-items:center;
padding:7px 9px;
border-radius:999px;
background:#f8fafc;
color:#475569;
font-size:12px;
line-height:1;
font-weight:850;
}

.annual-discount-side{
display:grid;
justify-items:end;
gap:12px;
min-width:160px;
}

.annual-discount-price{
text-align:right;
color:#111827;
}

.annual-discount-price del{
display:block;
margin-bottom:5px;
color:#94a3b8;
font-size:15px;
font-weight:850;
}

.annual-discount-price strong{
display:block;
font-size:38px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.annual-discount-price span{
display:block;
margin-top:5px;
color:#64748b;
font-size:13px;
font-weight:850;
}

.annual-discount-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.annual-discount-button:hover{
background:#ca8a04;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(202,138,4,.20);
}

.annual-discount-plan.is-featured .annual-discount-button{
background:linear-gradient(135deg,#eab308,#f97316);
}

@media (max-width:960px){
.annual-discount-pricing{
grid-template-columns:1fr;
max-width:680px;
}

.annual-discount-offer{
min-height:auto;
}

.annual-discount-plan{
grid-template-columns:1fr;
}

.annual-discount-side{
justify-items:start;
min-width:0;
}

.annual-discount-price{
text-align:left;
}
}

@media (max-width:640px){
.annual-discount-offer{
padding:24px;
border-radius:28px;
}

.annual-discount-title{
font-size:42px;
}

.annual-discount-number strong{
font-size:44px;
}

.annual-discount-plan{
padding:18px;
border-radius:22px;
}

.annual-discount-button{
width:100%;
}
}

This annual discount pricing table is useful when yearly billing is a major part of your offer. The large discount panel makes the annual deal feel important, while the compact plan blocks keep the actual comparison easy to scan.

11. Agency Pricing Table

Agency pricing tables need to communicate more than a monthly price. A web design agency, marketing studio, branding company, or development team often needs to explain the scope of each package, what is included, and who each plan is best for.

This example uses a proposal-style pricing layout instead of a normal three-card grid. The left side introduces the agency offer, while the right side presents three service packages as stacked project blocks with scope, timeline, deliverables, and CTA buttons.

• Designed for web design agencies, freelancers, studios, and service businesses
• Uses stacked proposal-style pricing blocks instead of equal pricing cards
• Includes project scope, timeline, deliverables, and starting price
• Works well for one-time service packages instead of monthly subscriptions
• Responsive layout keeps each agency package easy to read on mobile

HTML

<section class="agency-pricing">

  <aside class="agency-pricing-intro">
    <div class="agency-pricing-intro-content">
      <div class="agency-pricing-kicker">Agency Pricing</div>
      <h3 class="agency-pricing-title">Website packages built like a <span>proposal</span></h3>
      <p class="agency-pricing-text">Use this layout when your pricing needs to explain project scope, deliverables, and value instead of only showing a monthly number.</p>

      <ul class="agency-pricing-benefits">
        <li>Clear package scope for service-based websites</li>
        <li>Useful for agencies, freelancers, and studios</li>
        <li>Better for one-time project pricing than subscriptions</li>
      </ul>
    </div>
  </aside>

  <div class="agency-pricing-packages">

    <article class="agency-pricing-package">
      <div class="agency-pricing-package-main">
        <div class="agency-pricing-package-head">
          <h3>Launch Website</h3>
          <span class="agency-pricing-package-badge">Starter</span>
        </div>
        <p>A focused website package for small businesses that need a clean online presence and a professional first impression.</p>
        <div class="agency-pricing-scope">
          <div class="agency-pricing-scope-item">
            <strong>Pages</strong>
            <span>Up to 3 pages</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Timeline</strong>
            <span>1–2 weeks</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Includes</strong>
            <span>Responsive layout</span>
          </div>
        </div>
      </div>
      <div class="agency-pricing-package-side">
        <div class="agency-pricing-price">
          <span>Starts at</span>
          <strong>$900</strong>
        </div>
        <a class="agency-pricing-button" href="#">Request Quote</a>
      </div>
    </article>

    <article class="agency-pricing-package is-featured">
      <div class="agency-pricing-package-main">
        <div class="agency-pricing-package-head">
          <h3>Growth Website</h3>
          <span class="agency-pricing-package-badge">Popular</span>
        </div>
        <p>A stronger package for growing brands that need service pages, conversion sections, pricing blocks, and better SEO structure.</p>
        <div class="agency-pricing-scope">
          <div class="agency-pricing-scope-item">
            <strong>Pages</strong>
            <span>Up to 8 pages</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Timeline</strong>
            <span>3–4 weeks</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Includes</strong>
            <span>SEO structure</span>
          </div>
        </div>
      </div>
      <div class="agency-pricing-package-side">
        <div class="agency-pricing-price">
          <span>Starts at</span>
          <strong>$2,400</strong>
        </div>
        <a class="agency-pricing-button" href="#">Request Quote</a>
      </div>
    </article>

    <article class="agency-pricing-package">
      <div class="agency-pricing-package-main">
        <div class="agency-pricing-package-head">
          <h3>Custom Platform</h3>
          <span class="agency-pricing-package-badge">Advanced</span>
        </div>
        <p>A custom project package for larger websites, ecommerce sections, dashboards, integrations, and more advanced UI components.</p>
        <div class="agency-pricing-scope">
          <div class="agency-pricing-scope-item">
            <strong>Pages</strong>
            <span>Custom scope</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Timeline</strong>
            <span>Custom plan</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Includes</strong>
            <span>Advanced UI</span>
          </div>
        </div>
      </div>
      <div class="agency-pricing-package-side">
        <div class="agency-pricing-price">
          <span>Starts at</span>
          <strong>$5,000</strong>
        </div>
        <a class="agency-pricing-button" href="#">Contact Sales</a>
      </div>
    </article>

  </div>

</section>

CSS

.agency-pricing{
width:min(100%,1080px);
display:grid;
grid-template-columns:360px minmax(0,1fr);
gap:22px;
align-items:start;
}

.agency-pricing-intro{
position:sticky;
top:0;
padding:30px;
border-radius:34px;
background:#0f172a;
color:#ffffff;
box-shadow:0 28px 80px rgba(15,23,42,.22);
overflow:hidden;
}

.agency-pricing-intro::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:240px;
height:240px;
border-radius:999px;
background:rgba(99,102,241,.28);
}

.agency-pricing-intro::after{
content:"";
position:absolute;
left:-80px;
bottom:-80px;
width:220px;
height:220px;
border-radius:999px;
background:rgba(14,165,233,.16);
}

.agency-pricing-intro-content{
position:relative;
z-index:2;
}

.agency-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#c7d2fe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.agency-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.agency-pricing-title span{
color:#a5b4fc;
-webkit-text-fill-color:#a5b4fc;
}

.agency-pricing-text{
margin:0 0 26px;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.agency-pricing-benefits{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.agency-pricing-benefits li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#e2e8f0;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.agency-pricing-benefits li::before{
content:"";
flex:0 0 auto;
width:8px;
height:8px;
margin-top:7px;
border-radius:999px;
background:#a5b4fc;
box-shadow:0 0 0 4px rgba(165,180,252,.12);
}

.agency-pricing-packages{
display:grid;
gap:14px;
}

.agency-pricing-package{
display:grid;
grid-template-columns:minmax(0,1fr) 190px;
gap:20px;
align-items:stretch;
padding:22px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.agency-pricing-package.is-featured{
border-color:rgba(99,102,241,.40);
box-shadow:0 28px 80px rgba(99,102,241,.14);
}

.agency-pricing-package-main{
min-width:0;
}

.agency-pricing-package-head{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:12px;
}

.agency-pricing-package h3{
margin:0;
color:#0f172a;
font-size:24px;
line-height:1.18;
font-weight:950;
letter-spacing:-.025em;
}

.agency-pricing-package-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#eef2ff;
color:#4338ca;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.agency-pricing-package p{
margin:0 0 16px;
max-width:520px;
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.agency-pricing-scope{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.agency-pricing-scope-item{
padding:12px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.agency-pricing-scope-item strong{
display:block;
margin-bottom:4px;
color:#0f172a;
font-size:13px;
font-weight:950;
}

.agency-pricing-scope-item span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:750;
}

.agency-pricing-package-side{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:16px;
padding:18px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.agency-pricing-price{
color:#0f172a;
}

.agency-pricing-price span{
display:block;
margin-bottom:6px;
color:#64748b;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.agency-pricing-price strong{
display:block;
font-size:34px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.agency-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.agency-pricing-button:hover{
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(79,70,229,.20);
}

.agency-pricing-package.is-featured .agency-pricing-button{
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
}

@media (max-width:980px){
.agency-pricing{
grid-template-columns:1fr;
max-width:720px;
}

.agency-pricing-intro{
position:relative;
}
}

@media (max-width:720px){
.agency-pricing-package{
grid-template-columns:1fr;
}

.agency-pricing-scope{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.agency-pricing-intro{
padding:24px;
border-radius:28px;
}

.agency-pricing-title{
font-size:34px;
}

.agency-pricing-package{
padding:18px;
border-radius:24px;
}

.agency-pricing-package-side{
padding:16px;
border-radius:20px;
}
}

This agency pricing table is useful when your pricing is based on service packages rather than simple subscriptions. The proposal-style structure helps explain scope, timeline, and value before asking visitors to request a quote.

12. Hosting Pricing Table

Hosting pricing tables need to show technical differences clearly. Visitors often compare storage, bandwidth, websites, visits, backups, support level, and performance resources before choosing a plan.

This example uses a hosting-focused comparison layout instead of normal pricing cards. Each hosting plan is displayed as a compact server row with resource columns, a price block, and a CTA button. This makes the layout feel more technical and comparison-friendly.

• Designed for web hosting, managed WordPress hosting, VPS, and cloud plans
• Uses resource columns instead of long feature lists
• Good for comparing storage, bandwidth, websites, backups, and support
• Featured hosting plan uses a stronger row highlight
• Mobile layout turns each plan into a stacked resource card

HTML

<section class="hosting-pricing">

  <div class="hosting-pricing-header">
    <div>
      <div class="hosting-pricing-kicker">Hosting Pricing</div>
      <h3 class="hosting-pricing-title">Compare hosting plans by <span>real resources</span></h3>
    </div>
    <p class="hosting-pricing-note">Hosting pricing works best when technical limits are easy to scan. This layout compares resources before the user clicks a plan.</p>
  </div>

  <div class="hosting-pricing-table">

    <div class="hosting-pricing-labels">
      <span>Plan</span>
      <span>Sites</span>
      <span>Storage</span>
      <span>Visits</span>
      <span>Backups</span>
      <span>Price</span>
      <span></span>
    </div>

    <article class="hosting-pricing-row">
      <div class="hosting-plan-name">
        <h3>Start Host</h3>
        <p>For simple business websites and small WordPress projects.</p>
      </div>
      <div class="hosting-resource">
        <span>Sites</span>
        <strong>1</strong>
      </div>
      <div class="hosting-resource">
        <span>Storage</span>
        <strong>10GB</strong>
      </div>
      <div class="hosting-resource">
        <span>Visits</span>
        <strong>25K</strong>
      </div>
      <div class="hosting-resource">
        <span>Backups</span>
        <strong>Daily</strong>
      </div>
      <div class="hosting-price">
        <strong>$15</strong>
        <span>/month</span>
      </div>
      <a class="hosting-button" href="#">Choose</a>
    </article>

    <article class="hosting-pricing-row is-featured">
      <div class="hosting-plan-name">
        <h3>Business Host <span class="hosting-plan-badge">Popular</span></h3>
        <p>For growing websites that need better performance and more resources.</p>
      </div>
      <div class="hosting-resource">
        <span>Sites</span>
        <strong>5</strong>
      </div>
      <div class="hosting-resource">
        <span>Storage</span>
        <strong>50GB</strong>
      </div>
      <div class="hosting-resource">
        <span>Visits</span>
        <strong>150K</strong>
      </div>
      <div class="hosting-resource">
        <span>Backups</span>
        <strong>Daily</strong>
      </div>
      <div class="hosting-price">
        <strong>$49</strong>
        <span>/month</span>
      </div>
      <a class="hosting-button" href="#">Choose</a>
    </article>

    <article class="hosting-pricing-row">
      <div class="hosting-plan-name">
        <h3>Scale Host</h3>
        <p>For high-traffic websites, ecommerce stores, and advanced projects.</p>
      </div>
      <div class="hosting-resource">
        <span>Sites</span>
        <strong>20</strong>
      </div>
      <div class="hosting-resource">
        <span>Storage</span>
        <strong>200GB</strong>
      </div>
      <div class="hosting-resource">
        <span>Visits</span>
        <strong>1M</strong>
      </div>
      <div class="hosting-resource">
        <span>Backups</span>
        <strong>Hourly</strong>
      </div>
      <div class="hosting-price">
        <strong>$149</strong>
        <span>/month</span>
      </div>
      <a class="hosting-button" href="#">Contact</a>
    </article>

  </div>

  <div class="hosting-pricing-footer">
    <span>Free SSL</span>
    <span>CDN ready</span>
    <span>Staging included</span>
    <span>Expert support</span>
  </div>

</section>

CSS

.hosting-pricing{
width:min(100%,1100px);
}

.hosting-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.hosting-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#cffafe;
color:#0e7490;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.hosting-pricing-title{
margin:0;
max-width:720px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.hosting-pricing-title span{
background:linear-gradient(135deg,#06b6d4,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hosting-pricing-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.hosting-pricing-table{
padding:14px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.hosting-pricing-labels,
.hosting-pricing-row{
display:grid;
grid-template-columns:1.35fr repeat(4,.72fr) 150px 132px;
gap:10px;
align-items:center;
}

.hosting-pricing-labels{
padding:10px 14px 14px;
color:#64748b;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.hosting-pricing-labels span:first-child{
padding-left:6px;
}

.hosting-pricing-row{
position:relative;
padding:16px 14px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
margin-bottom:10px;
}

.hosting-pricing-row:last-child{
margin-bottom:0;
}

.hosting-pricing-row.is-featured{
background:
linear-gradient(135deg,rgba(6,182,212,.12),rgba(37,99,235,.10)),
#ffffff;
border-color:rgba(6,182,212,.42);
box-shadow:0 18px 50px rgba(6,182,212,.14);
}

.hosting-plan-name{
min-width:0;
}

.hosting-plan-name h3{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin:0 0 5px;
color:#0f172a;
font-size:20px;
line-height:1.2;
font-weight:950;
}

.hosting-plan-name p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:700;
}

.hosting-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 8px;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:10px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.hosting-resource{
padding:10px;
border-radius:16px;
background:#ffffff;
border:1px solid rgba(15,23,42,.06);
text-align:center;
}

.hosting-resource strong{
display:block;
margin-bottom:4px;
color:#0f172a;
font-size:15px;
line-height:1;
font-weight:950;
}

.hosting-resource span{
display:none;
color:#64748b;
font-size:11px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.hosting-price{
text-align:right;
color:#0f172a;
}

.hosting-price strong{
display:block;
font-size:30px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.hosting-price span{
display:block;
margin-top:4px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.hosting-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.hosting-button:hover{
background:#0891b2;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(8,145,178,.20);
}

.hosting-pricing-row.is-featured .hosting-button{
background:linear-gradient(135deg,#06b6d4,#2563eb);
}

.hosting-pricing-footer{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:18px;
}

.hosting-pricing-footer span{
display:inline-flex;
align-items:center;
padding:8px 10px;
border-radius:999px;
background:#cffafe;
color:#0e7490;
font-size:12px;
font-weight:900;
}

@media (max-width:980px){
.hosting-pricing-header{
grid-template-columns:1fr;
}

.hosting-pricing-labels{
display:none;
}

.hosting-pricing-row{
grid-template-columns:1fr;
gap:12px;
padding:18px;
}

.hosting-resource{
display:flex;
align-items:center;
justify-content:space-between;
text-align:left;
}

.hosting-resource span{
display:block;
}

.hosting-price{
text-align:left;
}

.hosting-button{
width:100%;
}
}

@media (max-width:640px){
.hosting-pricing-title{
font-size:34px;
}

.hosting-pricing-table{
padding:10px;
border-radius:26px;
}

.hosting-pricing-row{
border-radius:20px;
}

.hosting-pricing-footer{
justify-content:flex-start;
}
}

This hosting pricing table is useful when users need to compare technical resources quickly. Instead of forcing hosting features into long card lists, the row-based layout makes storage, visits, websites, backups, and price easier to scan.

13. eCommerce Pricing Table

eCommerce pricing tables need to explain what sellers get at each level. Instead of only showing a price, an online store pricing section should compare product limits, checkout features, sales channels, support, and transaction details.

This example uses an ecommerce-style pricing layout with a store summary panel at the top and three pricing plans below it. Each plan highlights product capacity, sales tools, and checkout features, making it useful for ecommerce platforms, online store builders, marketplace tools, and digital commerce services.

• Designed for ecommerce platforms, online store builders, and marketplace tools
• Includes product limits, sales channels, checkout tools, and support levels
• Uses a store dashboard-style summary above the pricing plans
• Pricing cards feel more ecommerce-specific than generic subscription cards
• Responsive layout stacks the dashboard and plans cleanly on mobile screens

HTML

<section class="ecommerce-pricing">

  <div class="ecommerce-pricing-dashboard">

    <div class="ecommerce-pricing-hero">
      <div class="ecommerce-pricing-hero-content">
        <div class="ecommerce-pricing-kicker">eCommerce Pricing</div>
        <h3 class="ecommerce-pricing-title">Launch, manage, and grow your <span>online store</span></h3>
        <p class="ecommerce-pricing-text">Use this pricing table for ecommerce platforms where sellers need to compare product limits, sales tools, and checkout features.</p>
      </div>
    </div>

    <div class="ecommerce-pricing-stats">
      <div class="ecommerce-pricing-stat">
        <strong>0%</strong>
        <span>Platform transaction fee on annual plans</span>
      </div>
      <div class="ecommerce-pricing-stat">
        <strong>24/7</strong>
        <span>Store monitoring and checkout protection</span>
      </div>
      <div class="ecommerce-pricing-stat">
        <strong>Fast</strong>
        <span>Responsive storefront pricing UI</span>
      </div>
    </div>

  </div>

  <div class="ecommerce-pricing-grid">

    <article class="ecommerce-pricing-plan">
      <div class="ecommerce-pricing-plan-top">
        <div class="ecommerce-pricing-plan-icon">🛒</div>
        <span class="ecommerce-pricing-plan-badge">Start</span>
      </div>
      <h3>Shop Starter</h3>
      <p class="ecommerce-pricing-plan-desc">For small stores, creators, and first-time sellers launching a simple catalog.</p>
      <div class="ecommerce-pricing-price">
        <strong>$29</strong>
        <span>/mo</span>
      </div>
      <div class="ecommerce-pricing-metrics">
        <div class="ecommerce-pricing-metric">
          <strong>100</strong>
          <span>Products</span>
        </div>
        <div class="ecommerce-pricing-metric">
          <strong>1</strong>
          <span>Channel</span>
        </div>
      </div>
      <ul class="ecommerce-pricing-tools">
        <li>Basic product catalog</li>
        <li>Secure checkout page</li>
        <li>Email support</li>
      </ul>
      <a class="ecommerce-pricing-button" href="#">Start Store</a>
    </article>

    <article class="ecommerce-pricing-plan is-featured">
      <div class="ecommerce-pricing-plan-top">
        <div class="ecommerce-pricing-plan-icon">📦</div>
        <span class="ecommerce-pricing-plan-badge">Popular</span>
      </div>
      <h3>Shop Growth</h3>
      <p class="ecommerce-pricing-plan-desc">For growing ecommerce brands that need more products, better checkout tools, and sales channels.</p>
      <div class="ecommerce-pricing-price">
        <strong>$79</strong>
        <span>/mo</span>
      </div>
      <div class="ecommerce-pricing-metrics">
        <div class="ecommerce-pricing-metric">
          <strong>2,500</strong>
          <span>Products</span>
        </div>
        <div class="ecommerce-pricing-metric">
          <strong>4</strong>
          <span>Channels</span>
        </div>
      </div>
      <ul class="ecommerce-pricing-tools">
        <li>Advanced product filtering</li>
        <li>Abandoned cart tools</li>
        <li>Priority support</li>
      </ul>
      <a class="ecommerce-pricing-button" href="#">Grow Store</a>
    </article>

    <article class="ecommerce-pricing-plan">
      <div class="ecommerce-pricing-plan-top">
        <div class="ecommerce-pricing-plan-icon">🏬</div>
        <span class="ecommerce-pricing-plan-badge">Scale</span>
      </div>
      <h3>Shop Enterprise</h3>
      <p class="ecommerce-pricing-plan-desc">For larger stores, marketplace-style catalogs, and teams that need custom ecommerce workflows.</p>
      <div class="ecommerce-pricing-price">
        <strong>$199</strong>
        <span>/mo</span>
      </div>
      <div class="ecommerce-pricing-metrics">
        <div class="ecommerce-pricing-metric">
          <strong>50K</strong>
          <span>Products</span>
        </div>
        <div class="ecommerce-pricing-metric">
          <strong>All</strong>
          <span>Channels</span>
        </div>
      </div>
      <ul class="ecommerce-pricing-tools">
        <li>Custom checkout logic</li>
        <li>Marketplace integrations</li>
        <li>Dedicated support</li>
      </ul>
      <a class="ecommerce-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.ecommerce-pricing{
width:min(100%,1080px);
}

.ecommerce-pricing-dashboard{
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:18px;
margin-bottom:18px;
}

.ecommerce-pricing-hero{
padding:30px;
border-radius:34px;
background:#052e16;
color:#ffffff;
box-shadow:0 28px 80px rgba(5,46,22,.20);
overflow:hidden;
position:relative;
}

.ecommerce-pricing-hero::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:260px;
height:260px;
border-radius:999px;
background:rgba(34,197,94,.22);
}

.ecommerce-pricing-hero-content{
position:relative;
z-index:2;
}

.ecommerce-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(187,247,208,.14);
border:1px solid rgba(187,247,208,.22);
color:#bbf7d0;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.ecommerce-pricing-title{
max-width:700px;
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.ecommerce-pricing-title span{
color:#86efac;
-webkit-text-fill-color:#86efac;
}

.ecommerce-pricing-text{
max-width:650px;
margin:0;
color:#dcfce7;
font-size:16px;
line-height:1.75;
}

.ecommerce-pricing-stats{
display:grid;
gap:12px;
}

.ecommerce-pricing-stat{
padding:18px;
border-radius:26px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 46px rgba(15,23,42,.08);
}

.ecommerce-pricing-stat strong{
display:block;
margin-bottom:5px;
color:#052e16;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
}

.ecommerce-pricing-stat span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:800;
}

.ecommerce-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.ecommerce-pricing-plan{
display:flex;
flex-direction:column;
padding:22px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.09);
}

.ecommerce-pricing-plan.is-featured{
border-color:rgba(34,197,94,.42);
box-shadow:0 30px 80px rgba(34,197,94,.16);
}

.ecommerce-pricing-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}

.ecommerce-pricing-plan-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:18px;
background:#dcfce7;
color:#15803d;
font-size:22px;
font-weight:950;
}

.ecommerce-pricing-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.ecommerce-pricing-plan.is-featured .ecommerce-pricing-plan-badge{
background:#052e16;
color:#ffffff;
}

.ecommerce-pricing-plan h3{
margin:0 0 8px;
color:#052e16;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.ecommerce-pricing-plan-desc{
min-height:68px;
margin:0 0 20px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.ecommerce-pricing-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:20px;
color:#052e16;
}

.ecommerce-pricing-price strong{
font-size:48px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.ecommerce-pricing-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.ecommerce-pricing-metrics{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.ecommerce-pricing-metric{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.ecommerce-pricing-metric strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
line-height:1;
font-weight:950;
}

.ecommerce-pricing-metric span{
display:block;
color:#64748b;
font-size:11px;
line-height:1.35;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.ecommerce-pricing-tools{
display:grid;
gap:10px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.ecommerce-pricing-tools li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.ecommerce-pricing-tools li::before{
content:"";
flex:0 0 auto;
width:9px;
height:9px;
margin-top:6px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.ecommerce-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#052e16;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.ecommerce-pricing-button:hover{
background:#16a34a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(22,163,74,.22);
}

.ecommerce-pricing-plan.is-featured .ecommerce-pricing-button{
background:linear-gradient(135deg,#16a34a,#14b8a6);
}

@media (max-width:960px){
.ecommerce-pricing-dashboard{
grid-template-columns:1fr;
}

.ecommerce-pricing-stats{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.ecommerce-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:700px){
.ecommerce-pricing-stats{
grid-template-columns:1fr;
}

.ecommerce-pricing-metrics{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.ecommerce-pricing-hero{
padding:24px;
border-radius:28px;
}

.ecommerce-pricing-title{
font-size:34px;
}

.ecommerce-pricing-plan{
padding:20px;
border-radius:24px;
}

.ecommerce-pricing-plan-desc{
min-height:auto;
}

.ecommerce-pricing-price strong{
font-size:40px;
}
}

This ecommerce pricing table is useful when pricing depends on store capacity, product limits, and sales tools. The dashboard-style top area makes the offer feel specific to online stores instead of using a generic pricing card layout.

14. App Pricing Table

App pricing tables often need a more product-led layout than standard pricing cards. App landing pages usually sell a workflow, a device experience, or a set of premium features rather than a simple list of website services.

This example uses an app-style pricing section with a phone mockup panel on the left and feature-based pricing tiers on the right. The plans are arranged as compact upgrade modules, making the layout feel closer to a mobile app product page than a traditional pricing table.

• Designed for mobile apps, SaaS apps, productivity tools, and app landing pages
• Uses a phone mockup panel to make the pricing section feel product-led
• Pricing tiers are displayed as upgrade modules instead of equal cards
• Includes feature highlights, plan prices, and clear upgrade buttons
• Responsive layout stacks the app preview and pricing modules on mobile

HTML

<section class="app-pricing">

  <div class="app-pricing-device-wrap">
    <div class="app-pricing-phone">
      <div class="app-pricing-phone-screen">
        <div class="app-pricing-phone-bar"></div>
        <div class="app-pricing-app-icon">A</div>
        <h3 class="app-pricing-phone-title">AppFlow Pro</h3>
        <p class="app-pricing-phone-text">A mobile-first pricing layout for apps, tools, and digital products.</p>

        <div class="app-pricing-phone-stats">
          <div class="app-pricing-phone-stat">
            <strong>4.9</strong>
            <span>User rating</span>
          </div>
          <div class="app-pricing-phone-stat">
            <strong>50K</strong>
            <span>Active users</span>
          </div>
        </div>

        <div class="app-pricing-phone-list">
          <span>Sync across devices</span>
          <span>Premium templates</span>
          <span>Smart reminders</span>
        </div>
      </div>
    </div>
  </div>

  <div class="app-pricing-content">
    <div class="app-pricing-kicker">App Pricing</div>
    <h3 class="app-pricing-title">Upgrade your app experience with <span>flexible tiers</span></h3>
    <p class="app-pricing-text">Use this app pricing table when the product experience matters as much as the plan comparison. The phone preview helps connect pricing to the app itself.</p>

    <div class="app-pricing-modules">

      <article class="app-pricing-module">
        <div>
          <h3>Free</h3>
          <p>For users who want to test the basic app workflow before upgrading.</p>
          <div class="app-pricing-module-features">
            <span>1 device</span>
            <span>Basic sync</span>
            <span>Community support</span>
          </div>
        </div>
        <div class="app-pricing-module-side">
          <div class="app-pricing-module-price">
            <strong>$0</strong>
            <span>forever</span>
          </div>
          <a class="app-pricing-button" href="#">Start</a>
        </div>
      </article>

      <article class="app-pricing-module is-featured">
        <div>
          <h3>Pro</h3>
          <p>For active users who need premium tools, more storage, and faster workflows.</p>
          <div class="app-pricing-module-features">
            <span>5 devices</span>
            <span>Smart sync</span>
            <span>Premium tools</span>
          </div>
        </div>
        <div class="app-pricing-module-side">
          <div class="app-pricing-module-price">
            <strong>$12</strong>
            <span>/month</span>
          </div>
          <a class="app-pricing-button" href="#">Upgrade</a>
        </div>
      </article>

      <article class="app-pricing-module">
        <div>
          <h3>Team</h3>
          <p>For small teams that need shared workspaces, permissions, and admin controls.</p>
          <div class="app-pricing-module-features">
            <span>Team seats</span>
            <span>Admin tools</span>
            <span>Priority support</span>
          </div>
        </div>
        <div class="app-pricing-module-side">
          <div class="app-pricing-module-price">
            <strong>$39</strong>
            <span>/month</span>
          </div>
          <a class="app-pricing-button" href="#">Contact</a>
        </div>
      </article>

    </div>
  </div>

</section>

CSS

.app-pricing{
width:min(100%,1080px);
display:grid;
grid-template-columns:390px minmax(0,1fr);
gap:24px;
align-items:center;
}

.app-pricing-device-wrap{
display:grid;
place-items:center;
padding:26px;
border-radius:38px;
background:#111827;
box-shadow:0 34px 90px rgba(17,24,39,.24);
overflow:hidden;
position:relative;
}

.app-pricing-device-wrap::before{
content:"";
position:absolute;
width:280px;
height:280px;
border-radius:999px;
right:-120px;
top:-100px;
background:rgba(168,85,247,.34);
}

.app-pricing-device-wrap::after{
content:"";
position:absolute;
width:260px;
height:260px;
border-radius:999px;
left:-120px;
bottom:-120px;
background:rgba(236,72,153,.22);
}

.app-pricing-phone{
position:relative;
z-index:2;
width:240px;
min-height:500px;
padding:14px;
border-radius:38px;
background:#020617;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 28px 80px rgba(0,0,0,.36);
}

.app-pricing-phone-screen{
min-height:472px;
padding:18px;
border-radius:28px;
background:
linear-gradient(180deg,#1e1b4b,#111827 55%,#020617);
overflow:hidden;
}

.app-pricing-phone-bar{
width:72px;
height:6px;
margin:0 auto 22px;
border-radius:999px;
background:rgba(255,255,255,.28);
}

.app-pricing-app-icon{
display:grid;
place-items:center;
width:58px;
height:58px;
margin-bottom:18px;
border-radius:20px;
background:linear-gradient(135deg,#8b5cf6,#ec4899);
color:#ffffff;
font-size:24px;
font-weight:950;
box-shadow:0 14px 34px rgba(236,72,153,.24);
}

.app-pricing-phone-title{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:26px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.app-pricing-phone-text{
margin:0 0 22px;
color:#cbd5e1;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.app-pricing-phone-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:18px;
}

.app-pricing-phone-stat{
padding:12px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.app-pricing-phone-stat strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:20px;
line-height:1;
font-weight:950;
}

.app-pricing-phone-stat span{
display:block;
color:#c4b5fd;
font-size:11px;
line-height:1.3;
font-weight:850;
}

.app-pricing-phone-list{
display:grid;
gap:9px;
}

.app-pricing-phone-list span{
display:flex;
align-items:center;
gap:8px;
padding:10px;
border-radius:14px;
background:rgba(255,255,255,.07);
color:#e5e7eb;
font-size:12px;
font-weight:800;
}

.app-pricing-phone-list span::before{
content:"";
width:7px;
height:7px;
border-radius:999px;
background:#ec4899;
}

.app-pricing-content{
min-width:0;
}

.app-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#ede9fe;
color:#6d28d9;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.app-pricing-title{
margin:0 0 14px;
max-width:700px;
color:#111827;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.app-pricing-title span{
background:linear-gradient(135deg,#7c3aed,#ec4899);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.app-pricing-text{
max-width:620px;
margin:0 0 24px;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.app-pricing-modules{
display:grid;
gap:12px;
}

.app-pricing-module{
display:grid;
grid-template-columns:minmax(0,1fr) 150px;
gap:18px;
align-items:center;
padding:18px;
border-radius:26px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 18px 48px rgba(15,23,42,.08);
}

.app-pricing-module.is-featured{
border-color:rgba(124,58,237,.40);
box-shadow:0 24px 68px rgba(124,58,237,.16);
}

.app-pricing-module h3{
margin:0 0 6px;
color:#111827;
font-size:21px;
line-height:1.18;
font-weight:950;
}

.app-pricing-module p{
margin:0 0 12px;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.app-pricing-module-features{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.app-pricing-module-features span{
display:inline-flex;
align-items:center;
padding:7px 9px;
border-radius:999px;
background:#f5f3ff;
color:#6d28d9;
font-size:12px;
font-weight:850;
}

.app-pricing-module-side{
display:grid;
justify-items:end;
gap:10px;
}

.app-pricing-module-price{
text-align:right;
color:#111827;
}

.app-pricing-module-price strong{
display:block;
font-size:34px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.app-pricing-module-price span{
display:block;
margin-top:4px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.app-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.app-pricing-button:hover{
background:#7c3aed;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(124,58,237,.22);
}

.app-pricing-module.is-featured .app-pricing-button{
background:linear-gradient(135deg,#7c3aed,#ec4899);
}

@media (max-width:980px){
.app-pricing{
grid-template-columns:1fr;
max-width:720px;
}

.app-pricing-device-wrap{
order:2;
}

.app-pricing-content{
order:1;
}
}

@media (max-width:700px){
.app-pricing-module{
grid-template-columns:1fr;
}

.app-pricing-module-side{
justify-items:start;
}

.app-pricing-module-price{
text-align:left;
}
}

@media (max-width:640px){
.app-pricing-title{
font-size:34px;
}

.app-pricing-device-wrap{
padding:18px;
border-radius:30px;
}

.app-pricing-phone{
width:100%;
max-width:250px;
min-height:auto;
}

.app-pricing-phone-screen{
min-height:430px;
}

.app-pricing-module{
padding:16px;
border-radius:22px;
}

.app-pricing-button{
width:100%;
}
}

This app pricing table is useful when you want pricing to feel connected to the actual product experience. The phone mockup makes the section more visual, while the upgrade modules keep the plan comparison clear and compact.

15. Membership Pricing Table

Membership pricing tables are useful for communities, course platforms, content libraries, clubs, premium newsletters, and subscription websites. They should make access levels, member benefits, and upgrade value easy to understand.

This example uses a membership pass layout instead of a normal pricing card grid. Each tier feels like an access card with a member level, benefit highlights, community access details, and a strong join button.

• Designed for memberships, communities, clubs, courses, and premium content sites
• Uses access pass style cards instead of generic pricing boxes
• Includes member levels, access benefits, community perks, and CTA buttons
• Highlights the Pro member tier as the best upgrade option
• Responsive layout stacks membership passes cleanly on mobile

HTML

<section class="membership-pricing">

  <div class="membership-pricing-header">
    <div>
      <div class="membership-pricing-kicker">Membership Pricing</div>
      <h3 class="membership-pricing-title">Choose your <span>member access</span> level</h3>
    </div>
    <p class="membership-pricing-note">Use this layout when pricing is based on access, community features, premium content, or recurring membership benefits.</p>
  </div>

  <div class="membership-pricing-passes">

    <article class="membership-pass is-basic">
      <div class="membership-pass-level">
        <span>Member</span>
        <strong>M1</strong>
      </div>
      <h3>Basic Access</h3>
      <p class="membership-pass-desc">For new members who want access to the core community and selected resources.</p>
      <div class="membership-pass-price">
        <strong>$9</strong>
        <span>/mo</span>
      </div>
      <div class="membership-pass-access">
        <strong>Access level</strong>
        <p>Community posts, starter resources, and monthly member updates.</p>
      </div>
      <ul class="membership-pass-benefits">
        <li>Member-only discussions</li>
        <li>Basic resource library</li>
        <li>Monthly newsletter</li>
      </ul>
      <a class="membership-pass-button" href="#">Join Basic</a>
    </article>

    <article class="membership-pass is-pro">
      <div class="membership-pass-level">
        <span>Pro Member</span>
        <strong>M2</strong>
      </div>
      <h3>Pro Access</h3>
      <p class="membership-pass-desc">For active members who want premium content, workshops, and better support.</p>
      <div class="membership-pass-price">
        <strong>$29</strong>
        <span>/mo</span>
      </div>
      <div class="membership-pass-access">
        <strong>Access level</strong>
        <p>Premium lessons, live workshops, templates, and private community areas.</p>
      </div>
      <ul class="membership-pass-benefits">
        <li>Premium content library</li>
        <li>Live monthly workshops</li>
        <li>Downloadable templates</li>
      </ul>
      <a class="membership-pass-button" href="#">Join Pro</a>
    </article>

    <article class="membership-pass is-vip">
      <div class="membership-pass-level">
        <span>VIP</span>
        <strong>M3</strong>
      </div>
      <h3>VIP Access</h3>
      <p class="membership-pass-desc">For members who want direct support, private sessions, and complete access.</p>
      <div class="membership-pass-price">
        <strong>$79</strong>
        <span>/mo</span>
      </div>
      <div class="membership-pass-access">
        <strong>Access level</strong>
        <p>Everything in Pro, plus private calls, VIP support, and early access.</p>
      </div>
      <ul class="membership-pass-benefits">
        <li>Private support sessions</li>
        <li>Early access to releases</li>
        <li>Complete content archive</li>
      </ul>
      <a class="membership-pass-button" href="#">Join VIP</a>
    </article>

  </div>

</section>

CSS

.membership-pricing{
width:min(100%,1080px);
}

.membership-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.membership-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fce7f3;
color:#be185d;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.membership-pricing-title{
margin:0;
max-width:720px;
color:#111827;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.membership-pricing-title span{
background:linear-gradient(135deg,#db2777,#f97316);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.membership-pricing-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.membership-pricing-passes{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.membership-pass{
position:relative;
display:flex;
flex-direction:column;
min-height:540px;
padding:24px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.10);
overflow:hidden;
}

.membership-pass::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:10px;
background:#e5e7eb;
}

.membership-pass.is-basic::before{
background:linear-gradient(90deg,#f9a8d4,#fb7185);
}

.membership-pass.is-pro::before{
background:linear-gradient(90deg,#db2777,#f97316);
}

.membership-pass.is-vip::before{
background:linear-gradient(90deg,#111827,#db2777);
}

.membership-pass.is-pro{
transform:translateY(-10px);
border-color:rgba(219,39,119,.38);
box-shadow:0 34px 90px rgba(219,39,119,.18);
}

.membership-pass-level{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:24px;
}

.membership-pass-level span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#fdf2f8;
color:#be185d;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.membership-pass-level strong{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:999px;
background:#111827;
color:#ffffff;
font-size:15px;
font-weight:950;
}

.membership-pass h3{
margin:0 0 8px;
color:#111827;
font-size:26px;
line-height:1.15;
font-weight:950;
letter-spacing:-.03em;
}

.membership-pass-desc{
min-height:70px;
margin:0 0 22px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.membership-pass-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:22px;
color:#111827;
}

.membership-pass-price strong{
font-size:52px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.membership-pass-price span{
padding-bottom:6px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.membership-pass-access{
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
margin-bottom:22px;
}

.membership-pass-access strong{
display:block;
margin-bottom:8px;
color:#111827;
font-size:14px;
font-weight:950;
}

.membership-pass-access p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:700;
}

.membership-pass-benefits{
display:grid;
gap:11px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.membership-pass-benefits li{
position:relative;
margin:0;
padding-left:28px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.membership-pass-benefits li::before{
content:"★";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#fce7f3;
color:#db2777;
font-size:10px;
font-weight:950;
}

.membership-pass-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
margin-top:auto;
border-radius:18px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.membership-pass-button:hover{
background:#db2777;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(219,39,119,.22);
}

.membership-pass.is-pro .membership-pass-button{
background:linear-gradient(135deg,#db2777,#f97316);
box-shadow:0 16px 34px rgba(219,39,119,.22);
}

@media (max-width:960px){
.membership-pricing-header{
grid-template-columns:1fr;
}

.membership-pricing-passes{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.membership-pass,
.membership-pass.is-pro{
min-height:auto;
transform:none;
}
}

@media (max-width:640px){
.membership-pricing-title{
font-size:34px;
}

.membership-pass{
padding:20px;
border-radius:26px;
}

.membership-pass-desc{
min-height:auto;
}

.membership-pass-price strong{
font-size:42px;
}
}

This membership pricing table is useful when the main value is access rather than a product package. The pass-style layout makes each tier feel like a membership level, which works well for communities, course websites, premium content platforms, and paid clubs.

16. Pricing Comparison Table

Pricing comparison tables are best when users need to compare many features across multiple plans. They are especially useful for SaaS products, hosting plans, software tools, memberships, and platforms where the details matter before purchase.

This example uses a true comparison matrix instead of pricing cards. The plan names and prices appear across the top, while the feature categories are listed down the left side. On smaller screens, the table becomes horizontally scrollable to preserve readability.

• Uses a real feature comparison matrix instead of card-based pricing
• Best for SaaS, software, hosting, and feature-rich product pricing
• Compares plan limits, support, automation, integrations, and security
• Includes highlighted recommended plan column
• Uses horizontal scrolling on small screens to avoid breaking the table

HTML

<section class="comparison-pricing">

  <div class="comparison-pricing-header">
    <div class="comparison-pricing-kicker">Comparison Table</div>
    <h3 class="comparison-pricing-title">Compare every plan <span>feature by feature</span></h3>
    <p class="comparison-pricing-text">Use a pricing comparison table when visitors need more detail than a simple pricing card can show.</p>
  </div>

  <div class="comparison-pricing-scroll">

    <div class="comparison-pricing-table">

      <div class="comparison-pricing-row comparison-pricing-head">
        <div class="comparison-pricing-cell comparison-pricing-feature-head">
          <strong>Plan comparison</strong>
          <span>Choose the best fit by comparing limits, tools, support, and security.</span>
        </div>

        <div class="comparison-pricing-cell comparison-pricing-plan-head">
          <div>
            <h3>Starter</h3>
            <div class="comparison-pricing-price">
              <strong>$19</strong>
              <span>/mo</span>
            </div>
          </div>
        </div>

        <div class="comparison-pricing-cell comparison-pricing-plan-head is-featured">
          <span class="comparison-pricing-plan-badge">Popular</span>
          <div>
            <h3>Growth</h3>
            <div class="comparison-pricing-price">
              <strong>$59</strong>
              <span>/mo</span>
            </div>
          </div>
        </div>

        <div class="comparison-pricing-cell comparison-pricing-plan-head">
          <div>
            <h3>Scale</h3>
            <div class="comparison-pricing-price">
              <strong>$129</strong>
              <span>/mo</span>
            </div>
          </div>
        </div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Projects</div>
        <div class="comparison-pricing-cell comparison-pricing-value">3</div>
        <div class="comparison-pricing-cell comparison-pricing-value">Unlimited</div>
        <div class="comparison-pricing-cell comparison-pricing-value">Unlimited</div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Team members</div>
        <div class="comparison-pricing-cell comparison-pricing-value">1</div>
        <div class="comparison-pricing-cell comparison-pricing-value">10</div>
        <div class="comparison-pricing-cell comparison-pricing-value">50</div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Automation</div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-minus">–</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Priority support</div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-minus">–</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Advanced security</div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-minus">–</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-minus">–</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
      </div>

      <div class="comparison-pricing-row comparison-pricing-cta-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Choose plan</div>
        <div class="comparison-pricing-cell comparison-pricing-value"><a class="comparison-pricing-button" href="#">Start</a></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><a class="comparison-pricing-button is-featured" href="#">Choose</a></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><a class="comparison-pricing-button" href="#">Contact</a></div>
      </div>

    </div>

  </div>

</section>

CSS

.comparison-pricing{
width:min(100%,1100px);
}

.comparison-pricing-header{
max-width:760px;
margin:0 auto 28px;
text-align:center;
}

.comparison-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.comparison-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.comparison-pricing-title span{
background:linear-gradient(135deg,#2563eb,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.comparison-pricing-text{
max-width:660px;
margin:0 auto;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.comparison-pricing-scroll{
overflow-x:auto;
padding-bottom:8px;
scrollbar-gutter:stable;
}

.comparison-pricing-scroll::-webkit-scrollbar{
height:10px;
}

.comparison-pricing-scroll::-webkit-scrollbar-track{
background:rgba(15,23,42,.08);
border-radius:999px;
}

.comparison-pricing-scroll::-webkit-scrollbar-thumb{
background:rgba(37,99,235,.35);
border-radius:999px;
}

.comparison-pricing-table{
min-width:880px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 24px 70px rgba(15,23,42,.10);
overflow:hidden;
}

.comparison-pricing-row{
display:grid;
grid-template-columns:1.2fr repeat(3,1fr);
}

.comparison-pricing-cell{
padding:18px;
border-right:1px solid rgba(15,23,42,.08);
border-bottom:1px solid rgba(15,23,42,.08);
}

.comparison-pricing-cell:last-child{
border-right:0;
}

.comparison-pricing-row:last-child .comparison-pricing-cell{
border-bottom:0;
}

.comparison-pricing-head{
background:#0f172a;
}

.comparison-pricing-head .comparison-pricing-cell{
border-color:rgba(255,255,255,.10);
color:#ffffff;
}

.comparison-pricing-feature-head{
display:flex;
flex-direction:column;
justify-content:flex-end;
min-height:150px;
}

.comparison-pricing-feature-head strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.comparison-pricing-feature-head span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:750;
}

.comparison-pricing-plan-head{
position:relative;
min-height:150px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:16px;
}

.comparison-pricing-plan-head.is-featured{
background:
linear-gradient(135deg,rgba(37,99,235,.28),rgba(124,58,237,.24)),
rgba(255,255,255,.04);
}

.comparison-pricing-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
padding:6px 9px;
border-radius:999px;
background:#ffffff;
color:#1d4ed8;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.comparison-pricing-plan-head h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.comparison-pricing-price{
display:flex;
align-items:flex-end;
gap:5px;
color:#ffffff;
}

.comparison-pricing-price strong{
font-size:38px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.comparison-pricing-price span{
padding-bottom:4px;
color:#cbd5e1;
font-size:13px;
font-weight:800;
}

.comparison-pricing-feature{
background:#f8fafc;
color:#0f172a;
font-size:14px;
font-weight:950;
}

.comparison-pricing-value{
color:#334155;
font-size:14px;
line-height:1.45;
font-weight:750;
text-align:center;
}

.comparison-pricing-check,
.comparison-pricing-minus{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:999px;
font-size:13px;
font-weight:950;
}

.comparison-pricing-check{
background:#dcfce7;
color:#15803d;
}

.comparison-pricing-minus{
background:#f1f5f9;
color:#94a3b8;
}

.comparison-pricing-cta-row{
background:#ffffff;
}

.comparison-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.comparison-pricing-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.comparison-pricing-button.is-featured{
background:linear-gradient(135deg,#2563eb,#7c3aed);
}

@media (max-width:640px){
.comparison-pricing-header{
text-align:left;
}

.comparison-pricing-title{
font-size:34px;
}

.comparison-pricing-table{
min-width:820px;
}

.comparison-pricing-cell{
padding:16px;
}
}

This pricing comparison table is useful when your visitors need to compare detailed plan differences before choosing. Unlike card-based pricing sections, the matrix layout is better for technical products, SaaS features, hosting resources, and feature-rich subscriptions.

17. Compact Pricing Table

Compact pricing tables are useful when you do not have enough space for a full pricing section. They work well in sidebars, checkout upsells, modal windows, account pages, dashboard panels, and smaller landing page sections.

This example uses a narrow pricing widget instead of a wide multi-card layout. The plans are displayed as compact selectable rows with short plan details, small feature pills, prices, and a single focused CTA area at the bottom.

• Designed for sidebars, dashboards, modals, and compact website sections
• Uses stacked selectable pricing rows instead of large cards
• Keeps pricing, benefits, and CTA inside a small focused widget
• Highlights the recommended plan with a selected state
• Works well on mobile because the layout is already narrow and stacked

HTML

<section class="compact-pricing">

  <div class="compact-pricing-header">
    <div class="compact-pricing-kicker">Compact Pricing</div>
    <h3 class="compact-pricing-title">Pick a plan quickly</h3>
    <p class="compact-pricing-text">A compact pricing table works well when the pricing UI needs to fit inside a small area without losing clarity.</p>
  </div>

  <div class="compact-pricing-options">

    <article class="compact-pricing-option">
      <div class="compact-pricing-option-main">
        <div class="compact-pricing-option-top">
          <h3>Lite</h3>
        </div>
        <p>For small tasks, simple sites, and quick experiments.</p>
        <div class="compact-pricing-pills">
          <span>1 project</span>
          <span>Email support</span>
        </div>
      </div>
      <div class="compact-pricing-price">
        <strong>$12</strong>
        <span>/mo</span>
      </div>
    </article>

    <article class="compact-pricing-option is-selected">
      <div class="compact-pricing-option-main">
        <div class="compact-pricing-option-top">
          <h3>Plus</h3>
          <span class="compact-pricing-badge">Best</span>
        </div>
        <p>For growing websites that need more sections and better flexibility.</p>
        <div class="compact-pricing-pills">
          <span>10 projects</span>
          <span>Priority</span>
          <span>Advanced UI</span>
        </div>
      </div>
      <div class="compact-pricing-price">
        <strong>$39</strong>
        <span>/mo</span>
      </div>
    </article>

    <article class="compact-pricing-option">
      <div class="compact-pricing-option-main">
        <div class="compact-pricing-option-top">
          <h3>Max</h3>
        </div>
        <p>For teams, larger websites, and complete custom layouts.</p>
        <div class="compact-pricing-pills">
          <span>Unlimited</span>
          <span>Team tools</span>
        </div>
      </div>
      <div class="compact-pricing-price">
        <strong>$89</strong>
        <span>/mo</span>
      </div>
    </article>

  </div>

  <div class="compact-pricing-footer">
    <div class="compact-pricing-footer-row">
      <span>Selected plan</span>
      <strong>Plus — $39/mo</strong>
    </div>
    <a class="compact-pricing-button" href="#">Continue with Plus</a>
    <p class="compact-pricing-note">Change or cancel your plan anytime. No hidden fees.</p>
  </div>

</section>

CSS

.compact-pricing{
width:min(100%,440px);
padding:18px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 30px 90px rgba(15,23,42,.14);
}

.compact-pricing-header{
padding:10px 8px 18px;
text-align:left;
}

.compact-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:7px 10px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:12px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.compact-pricing-title{
margin:0 0 8px;
color:#0f172a;
font-size:30px;
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
}

.compact-pricing-text{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.compact-pricing-options{
display:grid;
gap:10px;
}

.compact-pricing-option{
position:relative;
display:grid;
grid-template-columns:1fr auto;
gap:12px;
align-items:center;
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.07);
transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}

.compact-pricing-option:hover{
transform:translateY(-2px);
background:#ffffff;
border-color:rgba(37,99,235,.22);
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.compact-pricing-option.is-selected{
background:#eff6ff;
border-color:rgba(37,99,235,.42);
box-shadow:0 18px 46px rgba(37,99,235,.13);
}

.compact-pricing-option.is-selected::before{
content:"";
position:absolute;
left:12px;
top:50%;
width:8px;
height:38px;
border-radius:999px;
background:#2563eb;
transform:translateY(-50%);
}

.compact-pricing-option-main{
min-width:0;
padding-left:10px;
}

.compact-pricing-option-top{
display:flex;
align-items:center;
gap:8px;
margin-bottom:7px;
}

.compact-pricing-option h3{
margin:0;
color:#0f172a;
font-size:18px;
line-height:1.18;
font-weight:950;
}

.compact-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 8px;
border-radius:999px;
background:#ffffff;
color:#1d4ed8;
font-size:10px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.compact-pricing-option p{
margin:0 0 10px;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:650;
}

.compact-pricing-pills{
display:flex;
flex-wrap:wrap;
gap:6px;
}

.compact-pricing-pills span{
display:inline-flex;
align-items:center;
padding:6px 8px;
border-radius:999px;
background:#ffffff;
color:#334155;
font-size:11px;
line-height:1;
font-weight:850;
}

.compact-pricing-price{
text-align:right;
color:#0f172a;
}

.compact-pricing-price strong{
display:block;
font-size:28px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.compact-pricing-price span{
display:block;
margin-top:4px;
color:#64748b;
font-size:11px;
font-weight:850;
}

.compact-pricing-footer{
display:grid;
gap:12px;
margin-top:14px;
padding:16px;
border-radius:24px;
background:#0f172a;
color:#ffffff;
}

.compact-pricing-footer-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.compact-pricing-footer-row span{
color:#cbd5e1;
font-size:13px;
font-weight:750;
}

.compact-pricing-footer-row strong{
color:#ffffff;
font-size:18px;
font-weight:950;
}

.compact-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:46px;
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#06b6d4);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease;
}

.compact-pricing-button:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.24);
}

.compact-pricing-note{
margin:0;
color:#94a3b8;
font-size:12px;
line-height:1.5;
font-weight:700;
text-align:center;
}

@media (max-width:640px){
.compact-pricing{
padding:14px;
border-radius:26px;
}

.compact-pricing-option{
grid-template-columns:1fr;
}

.compact-pricing-price{
text-align:left;
padding-left:10px;
}

.compact-pricing-footer-row{
align-items:flex-start;
flex-direction:column;
gap:4px;
}
}

This compact pricing table is useful when a full pricing section would take too much space. The narrow widget structure makes it ideal for dashboards, sidebars, account pages, checkout upsells, and small landing page blocks.

18. Wide Pricing Section

Wide pricing sections are useful when pricing is one of the main parts of a landing page. Instead of placing pricing cards in a small isolated block, this layout creates a full-width pricing area with context, benefits, plan comparison, and trust elements.

This example uses a wide landing page layout with a large left-side value proposition and three pricing plans on the right. The section feels more like a complete conversion block than a basic pricing table.

• Uses a wide landing page pricing section instead of a small card grid
• Combines value proposition, pricing plans, trust badges, and CTA buttons
• Works well for SaaS homepages, product pages, and service landing pages
• Featured plan is integrated inside a larger conversion-focused section
• Responsive layout stacks the value content above pricing plans on smaller screens

HTML

<section class="wide-pricing-section">

  <div class="wide-pricing-layout">

    <div class="wide-pricing-copy">
      <div class="wide-pricing-copy-main">
        <div class="wide-pricing-kicker">Wide Pricing Section</div>
        <h3 class="wide-pricing-title">Pricing that supports the full <span>landing page story</span></h3>
        <p class="wide-pricing-text">Use a wide pricing section when you want to combine your value proposition, plan comparison, benefits, and conversion buttons in one strong block.</p>
      </div>

      <div class="wide-pricing-proof">
        <div class="wide-pricing-proof-item">
          <span>✓</span>
          <div>
            <strong>Built for conversions</strong>
            <p>Plans are supported by trust points and clear value messaging.</p>
          </div>
        </div>
        <div class="wide-pricing-proof-item">
          <span>✓</span>
          <div>
            <strong>Responsive by design</strong>
            <p>The full section stacks cleanly on smaller screens.</p>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="wide-pricing-plans">

        <article class="wide-pricing-card">
          <div class="wide-pricing-plan-label">
            <span>Start</span>
            <strong>01</strong>
          </div>
          <h3>Starter</h3>
          <p class="wide-pricing-card-desc">For simple projects and first landing pages that need a clean pricing section.</p>
          <div class="wide-pricing-price">
            <strong>$19</strong>
            <span>/mo</span>
          </div>
          <ul class="wide-pricing-list">
            <li>One website project</li>
            <li>Basic pricing components</li>
            <li>Email support</li>
          </ul>
          <a class="wide-pricing-button" href="#">Start</a>
        </article>

        <article class="wide-pricing-card is-featured">
          <div class="wide-pricing-plan-label">
            <span>Popular</span>
            <strong>02</strong>
          </div>
          <h3>Growth</h3>
          <p class="wide-pricing-card-desc">For growing websites that need stronger conversion sections and advanced pricing layouts.</p>
          <div class="wide-pricing-price">
            <strong>$59</strong>
            <span>/mo</span>
          </div>
          <ul class="wide-pricing-list">
            <li>Unlimited pricing sections</li>
            <li>Advanced responsive layouts</li>
            <li>Priority support</li>
          </ul>
          <a class="wide-pricing-button" href="#">Choose Growth</a>
        </article>

        <article class="wide-pricing-card">
          <div class="wide-pricing-plan-label">
            <span>Scale</span>
            <strong>03</strong>
          </div>
          <h3>Premium</h3>
          <p class="wide-pricing-card-desc">For teams that need custom pricing UI, landing page systems, and premium support.</p>
          <div class="wide-pricing-price">
            <strong>$129</strong>
            <span>/mo</span>
          </div>
          <ul class="wide-pricing-list">
            <li>Custom section system</li>
            <li>Team-ready UI blocks</li>
            <li>Dedicated support</li>
          </ul>
          <a class="wide-pricing-button" href="#">Contact</a>
        </article>

      </div>

      <div class="wide-pricing-bottom">
        <span>No setup fees</span>
        <span>Cancel anytime</span>
        <span>Secure checkout</span>
        <span>Fast implementation</span>
      </div>
    </div>

  </div>

</section>

CSS

.wide-pricing-section{
width:min(100%,1160px);
padding:24px;
border-radius:40px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 34px 100px rgba(0,0,0,.32);
backdrop-filter:blur(18px);
}

.wide-pricing-layout{
display:grid;
grid-template-columns:.9fr 1.45fr;
gap:24px;
align-items:stretch;
}

.wide-pricing-copy{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:32px;
padding:32px;
border-radius:32px;
background:
linear-gradient(135deg,rgba(37,99,235,.22),rgba(124,58,237,.14)),
rgba(15,23,42,.72);
border:1px solid rgba(255,255,255,.12);
overflow:hidden;
position:relative;
}

.wide-pricing-copy::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:260px;
height:260px;
border-radius:999px;
background:rgba(96,165,250,.20);
}

.wide-pricing-copy-main{
position:relative;
z-index:2;
}

.wide-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#bfdbfe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.wide-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,64px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
}

.wide-pricing-title span{
background:linear-gradient(90deg,#60a5fa,#c084fc,#34d399);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.wide-pricing-text{
margin:0;
color:#dbeafe;
font-size:16px;
line-height:1.75;
}

.wide-pricing-proof{
position:relative;
z-index:2;
display:grid;
gap:12px;
}

.wide-pricing-proof-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.wide-pricing-proof-item span{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:28px;
height:28px;
border-radius:999px;
background:rgba(52,211,153,.14);
color:#86efac;
font-size:13px;
font-weight:950;
}

.wide-pricing-proof-item strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:14px;
font-weight:950;
}

.wide-pricing-proof-item p{
margin:0;
color:#cbd5e1;
font-size:13px;
line-height:1.45;
font-weight:700;
}

.wide-pricing-plans{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
align-items:stretch;
}

.wide-pricing-card{
display:flex;
flex-direction:column;
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 22px 70px rgba(0,0,0,.16);
}

.wide-pricing-card.is-featured{
background:
linear-gradient(180deg,#ffffff,#eff6ff);
border-color:rgba(96,165,250,.54);
box-shadow:0 30px 90px rgba(37,99,235,.22);
transform:translateY(-12px);
}

.wide-pricing-plan-label{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:18px;
}

.wide-pricing-plan-label span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.wide-pricing-plan-label strong{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:13px;
font-weight:950;
}

.wide-pricing-card h3{
margin:0 0 8px;
color:#0f172a;
font-size:23px;
line-height:1.15;
font-weight:950;
}

.wide-pricing-card-desc{
min-height:72px;
margin:0 0 20px;
color:#64748b;
font-size:13px;
line-height:1.6;
font-weight:650;
}

.wide-pricing-price{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:20px;
color:#0f172a;
}

.wide-pricing-price strong{
font-size:44px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.wide-pricing-price span{
padding-bottom:5px;
color:#64748b;
font-size:13px;
font-weight:850;
}

.wide-pricing-list{
display:grid;
gap:11px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.wide-pricing-list li{
display:flex;
gap:9px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.wide-pricing-list li::before{
content:"";
flex:0 0 auto;
width:8px;
height:8px;
margin-top:6px;
border-radius:999px;
background:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.wide-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:46px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.wide-pricing-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.wide-pricing-card.is-featured .wide-pricing-button{
background:linear-gradient(135deg,#2563eb,#7c3aed);
}

.wide-pricing-bottom{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:18px;
}

.wide-pricing-bottom span{
display:inline-flex;
align-items:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:850;
}

@media (max-width:1050px){
.wide-pricing-layout{
grid-template-columns:1fr;
}

.wide-pricing-plans{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.wide-pricing-card.is-featured{
transform:none;
}
}

@media (max-width:640px){
.wide-pricing-section{
padding:14px;
border-radius:30px;
}

.wide-pricing-copy{
padding:24px;
border-radius:24px;
}

.wide-pricing-title{
font-size:38px;
}

.wide-pricing-card{
padding:18px;
border-radius:22px;
}

.wide-pricing-card-desc{
min-height:auto;
}

.wide-pricing-bottom{
justify-content:flex-start;
}
}

This wide pricing section is useful when pricing needs to support the full landing page story. The layout combines plan comparison, value messaging, trust signals, and CTA buttons inside one large conversion-focused section.

19. Two Column Pricing Table

Two column pricing tables are useful when you only need to compare two clear choices. This works especially well for Personal vs Business plans, Basic vs Pro offers, one-time vs subscription pricing, or simple service packages where too many options would create friction.

This example uses a direct side-by-side pricing layout with a strong “best for” section in each column. Instead of showing three or four plans, it keeps the decision simple and helps visitors quickly choose between two different use cases.

• Designed for simple two-plan pricing comparisons
• Works well for Personal vs Business, Basic vs Pro, or Starter vs Premium offers
• Uses large two-column cards with different value positioning
• Includes “best for” labels, feature blocks, pricing, and CTA buttons
• Mobile layout stacks both plans into a clean single-column decision flow

HTML

<section class="two-column-pricing">

  <div class="two-column-pricing-header">
    <div class="two-column-pricing-kicker">Two Column Pricing</div>
    <h3 class="two-column-pricing-title">Make the decision <span>simple and direct</span></h3>
    <p class="two-column-pricing-text">Use this pricing table when users only need to choose between two clear options instead of comparing many plans.</p>
  </div>

  <div class="two-column-pricing-grid">

    <article class="two-column-plan">
      <div class="two-column-plan-inner">
        <div class="two-column-plan-top">
          <span class="two-column-plan-label">Personal</span>
        </div>

        <h3>Creator</h3>
        <p class="two-column-plan-desc">For individual creators, freelancers, and small personal projects that need a clean pricing solution.</p>

        <div class="two-column-best">
          <strong>Best for</strong>
          <span>Personal websites, small portfolios, landing pages, and solo projects.</span>
        </div>

        <div class="two-column-price">
          <strong>$19</strong>
          <span>/month</span>
        </div>

        <ul class="two-column-features">
          <li>One active project</li>
          <li>Basic pricing section</li>
          <li>Email support</li>
          <li>Responsive CSS</li>
        </ul>

        <a class="two-column-button" href="#">Choose Creator</a>
      </div>
    </article>

    <article class="two-column-plan is-pro">
      <div class="two-column-plan-inner">
        <div class="two-column-plan-top">
          <span class="two-column-plan-label">Business</span>
          <span class="two-column-plan-badge">Recommended</span>
        </div>

        <h3>Professional</h3>
        <p class="two-column-plan-desc">For businesses that need stronger conversion sections, more flexibility, and better support.</p>

        <div class="two-column-best">
          <strong>Best for</strong>
          <span>Business websites, service pages, SaaS landing pages, and conversion-focused offers.</span>
        </div>

        <div class="two-column-price">
          <strong>$59</strong>
          <span>/month</span>
        </div>

        <ul class="two-column-features">
          <li>Unlimited sections</li>
          <li>Advanced pricing UI</li>
          <li>Priority support</li>
          <li>CTA-focused layout</li>
        </ul>

        <a class="two-column-button" href="#">Choose Professional</a>
      </div>
    </article>

  </div>

</section>

CSS

.two-column-pricing{
width:min(100%,1040px);
}

.two-column-pricing-header{
max-width:760px;
margin:0 auto 30px;
text-align:center;
}

.two-column-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.two-column-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.two-column-pricing-title span{
background:linear-gradient(135deg,#2563eb,#111827);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.two-column-pricing-text{
max-width:640px;
margin:0 auto;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.two-column-pricing-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
align-items:stretch;
}

.two-column-plan{
display:flex;
flex-direction:column;
padding:28px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 24px 70px rgba(15,23,42,.10);
position:relative;
overflow:hidden;
}

.two-column-plan.is-pro{
background:#0f172a;
border-color:rgba(37,99,235,.34);
box-shadow:0 34px 90px rgba(15,23,42,.26);
}

.two-column-plan.is-pro::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:250px;
height:250px;
border-radius:999px;
background:rgba(37,99,235,.26);
}

.two-column-plan-inner{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
height:100%;
}

.two-column-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
margin-bottom:24px;
}

.two-column-plan-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:#f1f5f9;
color:#334155;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.two-column-plan.is-pro .two-column-plan-label{
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.14);
color:#bfdbfe;
}

.two-column-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
white-space:nowrap;
}

.two-column-plan h3{
margin:0 0 10px;
color:#0f172a;
font-size:32px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.two-column-plan.is-pro h3{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.two-column-plan-desc{
min-height:82px;
margin:0 0 24px;
color:#64748b;
font-size:15px;
line-height:1.7;
}

.two-column-plan.is-pro .two-column-plan-desc{
color:#cbd5e1;
}

.two-column-best{
display:grid;
gap:8px;
margin-bottom:24px;
padding:18px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.two-column-plan.is-pro .two-column-best{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.12);
}

.two-column-best strong{
color:#0f172a;
font-size:14px;
font-weight:950;
}

.two-column-plan.is-pro .two-column-best strong{
color:#ffffff;
}

.two-column-best span{
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.two-column-plan.is-pro .two-column-best span{
color:#cbd5e1;
}

.two-column-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:24px;
color:#0f172a;
}

.two-column-plan.is-pro .two-column-price{
color:#ffffff;
}

.two-column-price strong{
font-size:58px;
line-height:.9;
font-weight:950;
letter-spacing:-.065em;
}

.two-column-price span{
padding-bottom:7px;
color:#64748b;
font-size:15px;
font-weight:850;
}

.two-column-plan.is-pro .two-column-price span{
color:#cbd5e1;
}

.two-column-features{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:0 0 28px;
padding:0;
list-style:none;
}

.two-column-features li{
display:flex;
gap:9px;
align-items:flex-start;
margin:0;
padding:12px;
border-radius:16px;
background:#f8fafc;
color:#334155;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.two-column-plan.is-pro .two-column-features li{
background:rgba(255,255,255,.08);
color:#e2e8f0;
}

.two-column-features li::before{
content:"✓";
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#dbeafe;
color:#2563eb;
font-size:11px;
font-weight:950;
}

.two-column-plan.is-pro .two-column-features li::before{
background:#2563eb;
color:#ffffff;
}

.two-column-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.two-column-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.two-column-plan.is-pro .two-column-button{
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
}

.two-column-plan.is-pro .two-column-button:hover{
background:#dbeafe;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
}

@media (max-width:860px){
.two-column-pricing-grid{
grid-template-columns:1fr;
max-width:580px;
margin:0 auto;
}

.two-column-plan-desc{
min-height:auto;
}
}

@media (max-width:640px){
.two-column-pricing-header{
text-align:left;
}

.two-column-pricing-title{
font-size:34px;
}

.two-column-plan{
padding:22px;
border-radius:26px;
}

.two-column-features{
grid-template-columns:1fr;
}

.two-column-price strong{
font-size:44px;
}

.two-column-plan-top{
flex-direction:column;
align-items:flex-start;
}
}

This two column pricing table is useful when you want to reduce decision fatigue. Instead of showing too many options, the layout presents two clear paths and makes the difference between personal and business pricing easy to understand.

20. Four Column Pricing Table

Four column pricing tables are useful when a website needs to show a broader range of plans. They work well for SaaS tools, hosting companies, agencies, memberships, productized services, and platforms that need clear upgrade paths from free or basic plans to enterprise-level offers.

This example uses a four-plan pricing grid with compact cards, clear plan hierarchy, a highlighted recommended plan, and a responsive structure that stacks cleanly on smaller screens. The layout is built to handle more plans without feeling too crowded.

• Designed for websites that need four pricing plans
• Works well for free, starter, professional, and enterprise pricing structures
• Uses compact card spacing so four columns fit on desktop
• Includes a featured plan without making the other plans disappear
• Responsive layout changes from four columns to two columns and then one column

HTML

<section class="four-column-pricing">

  <div class="four-column-pricing-header">
    <div>
      <div class="four-column-pricing-kicker">Four Plans</div>
      <h3 class="four-column-pricing-title">Show a complete upgrade path with <span>four pricing tiers</span></h3>
    </div>
    <p class="four-column-pricing-note">Use this layout when your product needs more than three plans but still has to stay readable and responsive.</p>
  </div>

  <div class="four-column-grid">

    <article class="four-column-card">
      <div class="four-column-card-top">
        <div class="four-column-icon">F</div>
        <span class="four-column-badge">Free</span>
      </div>
      <h3>Free</h3>
      <p class="four-column-desc">For users who want to test the basics before choosing a paid plan.</p>
      <div class="four-column-price">
        <strong>$0</strong>
        <span>/mo</span>
      </div>
      <ul class="four-column-features">
        <li>One project</li>
        <li>Basic components</li>
        <li>Community support</li>
      </ul>
      <a class="four-column-button" href="#">Start Free</a>
    </article>

    <article class="four-column-card">
      <div class="four-column-card-top">
        <div class="four-column-icon">S</div>
        <span class="four-column-badge">Starter</span>
      </div>
      <h3>Starter</h3>
      <p class="four-column-desc">For small websites that need a clean and responsive pricing section.</p>
      <div class="four-column-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <ul class="four-column-features">
        <li>Three projects</li>
        <li>Responsive pricing UI</li>
        <li>Email support</li>
      </ul>
      <a class="four-column-button" href="#">Choose Starter</a>
    </article>

    <article class="four-column-card is-featured">
      <div class="four-column-card-top">
        <div class="four-column-icon">P</div>
        <span class="four-column-badge">Popular</span>
      </div>
      <h3>Pro</h3>
      <p class="four-column-desc">For growing websites that need advanced sections and better conversion tools.</p>
      <div class="four-column-price">
        <strong>$59</strong>
        <span>/mo</span>
      </div>
      <ul class="four-column-features">
        <li>Unlimited sections</li>
        <li>Advanced pricing cards</li>
        <li>Priority support</li>
      </ul>
      <a class="four-column-button" href="#">Choose Pro</a>
    </article>

    <article class="four-column-card">
      <div class="four-column-card-top">
        <div class="four-column-icon">E</div>
        <span class="four-column-badge">Enterprise</span>
      </div>
      <h3>Scale</h3>
      <p class="four-column-desc">For teams that need custom pricing systems and dedicated support.</p>
      <div class="four-column-price">
        <strong>$149</strong>
        <span>/mo</span>
      </div>
      <ul class="four-column-features">
        <li>Custom UI system</li>
        <li>Team-ready sections</li>
        <li>Dedicated support</li>
      </ul>
      <a class="four-column-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="four-column-footer">
    <span>Free trial available</span>
    <span>No setup fees</span>
    <span>Cancel anytime</span>
    <span>Secure checkout</span>
  </div>

</section>

CSS

.four-column-pricing{
width:min(100%,1160px);
}

.four-column-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:24px;
align-items:end;
margin-bottom:30px;
}

.four-column-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ede9fe;
color:#6d28d9;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.four-column-pricing-title{
margin:0;
max-width:760px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.four-column-pricing-title span{
background:linear-gradient(135deg,#7c3aed,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.four-column-pricing-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.four-column-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
align-items:stretch;
}

.four-column-card{
position:relative;
display:flex;
flex-direction:column;
padding:18px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
overflow:hidden;
}

.four-column-card.is-featured{
border-color:rgba(124,58,237,.44);
box-shadow:0 30px 80px rgba(124,58,237,.16);
}

.four-column-card.is-featured::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:8px;
background:linear-gradient(90deg,#7c3aed,#2563eb);
}

.four-column-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
margin-bottom:18px;
}

.four-column-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:16px;
background:#f5f3ff;
color:#7c3aed;
font-size:17px;
font-weight:950;
}

.four-column-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 8px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:10px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
white-space:nowrap;
}

.four-column-card.is-featured .four-column-badge{
background:#0f172a;
color:#ffffff;
}

.four-column-card h3{
margin:0 0 7px;
color:#0f172a;
font-size:21px;
line-height:1.15;
font-weight:950;
}

.four-column-desc{
min-height:66px;
margin:0 0 18px;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.four-column-price{
display:flex;
align-items:flex-end;
gap:5px;
margin-bottom:18px;
color:#0f172a;
}

.four-column-price strong{
font-size:40px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.four-column-price span{
padding-bottom:5px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.four-column-features{
display:grid;
gap:10px;
margin:0 0 22px;
padding:0;
list-style:none;
}

.four-column-features li{
position:relative;
margin:0;
padding-left:24px;
color:#334155;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.four-column-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
border-radius:999px;
background:#ede9fe;
color:#7c3aed;
font-size:10px;
font-weight:950;
}

.four-column-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.four-column-button:hover{
background:#7c3aed;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(124,58,237,.22);
}

.four-column-card.is-featured .four-column-button{
background:linear-gradient(135deg,#7c3aed,#2563eb);
}

.four-column-footer{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:18px;
}

.four-column-footer span{
display:inline-flex;
align-items:center;
padding:8px 10px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#64748b;
font-size:12px;
font-weight:850;
}

@media (max-width:1080px){
.four-column-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:760px){
.four-column-pricing-header{
grid-template-columns:1fr;
}

.four-column-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.four-column-pricing-title{
font-size:34px;
}

.four-column-card{
padding:18px;
border-radius:24px;
}

.four-column-desc{
min-height:auto;
}

.four-column-footer{
justify-content:flex-start;
}
}

This four column pricing table is useful when a product has a wider upgrade path. The responsive grid keeps four plans readable on desktop, then adapts to two columns and finally one column on smaller screens.

21. Pricing Table with Icons

Pricing tables with icons are useful when each plan needs a stronger visual identity. Icons help users quickly understand whether a plan is for beginners, growing teams, advanced users, or enterprise customers.

This example uses large icon blocks, short plan positioning, compact plan metrics, and separate CTA areas. The layout is more visual than a standard pricing card and works well for SaaS tools, creative services, app subscriptions, and productized service plans.

• Uses large icon areas to make each pricing plan easier to identify
• Good for SaaS, creative services, apps, and feature-based pricing
• Includes plan positioning, metrics, features, and CTA buttons
• Featured plan uses icon color, border, and badge emphasis
• Responsive layout turns the icon pricing cards into stacked mobile blocks

HTML

<section class="icon-pricing">

  <div class="icon-pricing-header">
    <div>
      <div class="icon-pricing-kicker">Icon Pricing</div>
      <h3 class="icon-pricing-title">Give every pricing plan a <span>clear visual identity</span></h3>
    </div>
    <p class="icon-pricing-note">Use icons when each plan represents a different user type, feature level, or product experience.</p>
  </div>

  <div class="icon-pricing-grid">

    <article class="icon-pricing-card is-blue">
      <div class="icon-pricing-visual">
        <div class="icon-pricing-icon">⚡</div>
        <div class="icon-pricing-visual-bottom">
          <span>Launch</span>
          <strong>Fast setup</strong>
        </div>
      </div>
      <h3>Starter</h3>
      <p class="icon-pricing-desc">For small projects that need a simple pricing section and a fast launch.</p>
      <div class="icon-pricing-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <div class="icon-pricing-metrics">
        <div class="icon-pricing-metric">
          <strong>3</strong>
          <span>Projects</span>
        </div>
        <div class="icon-pricing-metric">
          <strong>Basic</strong>
          <span>Support</span>
        </div>
      </div>
      <ul class="icon-pricing-features">
        <li>Responsive pricing cards</li>
        <li>Basic feature sections</li>
        <li>Email support</li>
      </ul>
      <a class="icon-pricing-button" href="#">Choose Starter</a>
    </article>

    <article class="icon-pricing-card is-purple is-featured">
      <div class="icon-pricing-visual">
        <div class="icon-pricing-icon">✦</div>
        <div class="icon-pricing-visual-bottom">
          <span>Popular</span>
          <strong>Best value</strong>
        </div>
      </div>
      <h3>Growth</h3>
      <p class="icon-pricing-desc">For growing websites that need better conversion sections and more flexibility.</p>
      <div class="icon-pricing-price">
        <strong>$59</strong>
        <span>/mo</span>
      </div>
      <div class="icon-pricing-metrics">
        <div class="icon-pricing-metric">
          <strong>20</strong>
          <span>Projects</span>
        </div>
        <div class="icon-pricing-metric">
          <strong>Priority</strong>
          <span>Support</span>
        </div>
      </div>
      <ul class="icon-pricing-features">
        <li>Advanced pricing layouts</li>
        <li>Conversion-focused UI</li>
        <li>Priority support</li>
      </ul>
      <a class="icon-pricing-button" href="#">Choose Growth</a>
    </article>

    <article class="icon-pricing-card is-dark">
      <div class="icon-pricing-visual">
        <div class="icon-pricing-icon">◆</div>
        <div class="icon-pricing-visual-bottom">
          <span>Scale</span>
          <strong>Custom UI</strong>
        </div>
      </div>
      <h3>Enterprise</h3>
      <p class="icon-pricing-desc">For teams that need custom pricing systems, support, and reusable UI components.</p>
      <div class="icon-pricing-price">
        <strong>$149</strong>
        <span>/mo</span>
      </div>
      <div class="icon-pricing-metrics">
        <div class="icon-pricing-metric">
          <strong>∞</strong>
          <span>Projects</span>
        </div>
        <div class="icon-pricing-metric">
          <strong>Team</strong>
          <span>Support</span>
        </div>
      </div>
      <ul class="icon-pricing-features">
        <li>Custom pricing sections</li>
        <li>Team-ready components</li>
        <li>Dedicated support</li>
      </ul>
      <a class="icon-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.icon-pricing{
width:min(100%,1080px);
}

.icon-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:24px;
align-items:end;
margin-bottom:30px;
}

.icon-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.icon-pricing-title{
margin:0;
max-width:760px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.icon-pricing-title span{
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.icon-pricing-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.icon-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.icon-pricing-card{
display:flex;
flex-direction:column;
padding:18px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.09);
overflow:hidden;
}

.icon-pricing-card.is-featured{
border-color:rgba(14,165,233,.46);
box-shadow:0 32px 90px rgba(14,165,233,.16);
}

.icon-pricing-visual{
position:relative;
min-height:180px;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:22px;
border-radius:26px;
background:#f8fafc;
overflow:hidden;
margin-bottom:20px;
}

.icon-pricing-card.is-blue .icon-pricing-visual{
background:linear-gradient(135deg,#e0f2fe,#f8fafc);
}

.icon-pricing-card.is-purple .icon-pricing-visual{
background:linear-gradient(135deg,#ede9fe,#f8fafc);
}

.icon-pricing-card.is-dark .icon-pricing-visual{
background:#0f172a;
}

.icon-pricing-visual::after{
content:"";
position:absolute;
right:-48px;
bottom:-48px;
width:140px;
height:140px;
border-radius:999px;
background:rgba(14,165,233,.14);
}

.icon-pricing-card.is-purple .icon-pricing-visual::after{
background:rgba(139,92,246,.16);
}

.icon-pricing-card.is-dark .icon-pricing-visual::after{
background:rgba(255,255,255,.10);
}

.icon-pricing-icon{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:62px;
height:62px;
border-radius:22px;
background:#0ea5e9;
color:#ffffff;
font-size:28px;
font-weight:950;
box-shadow:0 18px 42px rgba(14,165,233,.26);
}

.icon-pricing-card.is-purple .icon-pricing-icon{
background:#8b5cf6;
box-shadow:0 18px 42px rgba(139,92,246,.26);
}

.icon-pricing-card.is-dark .icon-pricing-icon{
background:#ffffff;
color:#0f172a;
box-shadow:0 18px 42px rgba(255,255,255,.16);
}

.icon-pricing-visual-bottom{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
}

.icon-pricing-visual-bottom span{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.78);
color:#0369a1;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.icon-pricing-card.is-dark .icon-pricing-visual-bottom span{
background:rgba(255,255,255,.12);
color:#e0f2fe;
}

.icon-pricing-visual-bottom strong{
color:#0f172a;
font-size:13px;
font-weight:950;
}

.icon-pricing-card.is-dark .icon-pricing-visual-bottom strong{
color:#ffffff;
}

.icon-pricing-card h3{
margin:0 0 8px;
color:#0f172a;
font-size:25px;
line-height:1.15;
font-weight:950;
}

.icon-pricing-desc{
min-height:70px;
margin:0 0 20px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.icon-pricing-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:18px;
color:#0f172a;
}

.icon-pricing-price strong{
font-size:48px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.icon-pricing-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.icon-pricing-metrics{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.icon-pricing-metric{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.icon-pricing-metric strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
font-weight:950;
}

.icon-pricing-metric span{
display:block;
color:#64748b;
font-size:11px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.icon-pricing-features{
display:grid;
gap:10px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.icon-pricing-features li{
position:relative;
margin:0;
padding-left:25px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.icon-pricing-features li::before{
content:"";
position:absolute;
left:0;
top:7px;
width:9px;
height:9px;
border-radius:999px;
background:#0ea5e9;
box-shadow:0 0 0 4px rgba(14,165,233,.10);
}

.icon-pricing-card.is-purple .icon-pricing-features li::before{
background:#8b5cf6;
box-shadow:0 0 0 4px rgba(139,92,246,.10);
}

.icon-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.icon-pricing-button:hover{
background:#0ea5e9;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(14,165,233,.22);
}

.icon-pricing-card.is-featured .icon-pricing-button{
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
}

@media (max-width:960px){
.icon-pricing-header{
grid-template-columns:1fr;
}

.icon-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.icon-pricing-title{
font-size:34px;
}

.icon-pricing-card{
padding:16px;
border-radius:26px;
}

.icon-pricing-visual{
min-height:160px;
border-radius:22px;
}

.icon-pricing-desc{
min-height:auto;
}

.icon-pricing-metrics{
grid-template-columns:1fr;
}
}

This pricing table with icons is useful when your plans should feel more visual and easier to identify. The icon panels make each pricing tier more memorable while still keeping the price, metrics, and CTA button easy to scan.

22. Pricing Table with Feature Checkmarks

Pricing tables with feature checkmarks are useful when users need to understand exactly what is included in each plan. Checkmarks, muted unavailable items, and grouped features make the pricing decision easier to scan.

This example uses a checklist-focused pricing layout. Instead of giving every feature the same visual weight, included features use clear checkmarks while unavailable features are muted. This makes the pricing table useful for SaaS plans, memberships, service packages, and feature-limited products.

• Uses clear included and unavailable feature states
• Good for SaaS, memberships, service packages, and software pricing
• Highlights plan differences with checkmarks and muted unavailable items
• Includes a compact plan summary before the feature checklist
• Responsive layout keeps each checklist card readable on mobile

HTML

<section class="checkmark-pricing">

  <div class="checkmark-pricing-header">
    <div class="checkmark-pricing-kicker">Feature Checkmarks</div>
    <h3 class="checkmark-pricing-title">Show exactly what every plan <span>includes</span></h3>
    <p class="checkmark-pricing-text">Use checkmarks and muted unavailable items when users need to compare features quickly before choosing a plan.</p>
  </div>

  <div class="checkmark-pricing-grid">

    <article class="checkmark-pricing-card">
      <div class="checkmark-plan-top">
        <div class="checkmark-plan-name">
          <h3>Basic</h3>
          <p>For simple websites and first projects.</p>
        </div>
        <span class="checkmark-plan-badge">Start</span>
      </div>
      <div class="checkmark-price">
        <strong>$15</strong>
        <span>/mo</span>
      </div>
      <div class="checkmark-summary">
        <div class="checkmark-summary-item">
          <strong>3</strong>
          <span>Projects</span>
        </div>
        <div class="checkmark-summary-item">
          <strong>Basic</strong>
          <span>Support</span>
        </div>
      </div>
      <div class="checkmark-feature-group">
        <p class="checkmark-feature-title">Included features</p>
        <ul class="checkmark-feature-list">
          <li>Responsive pricing layout</li>
          <li>Basic CTA buttons</li>
          <li>Email support</li>
          <li class="is-muted">Advanced analytics</li>
          <li class="is-muted">Custom integrations</li>
        </ul>
      </div>
      <a class="checkmark-button" href="#">Choose Basic</a>
    </article>

    <article class="checkmark-pricing-card is-featured">
      <div class="checkmark-plan-top">
        <div class="checkmark-plan-name">
          <h3>Growth</h3>
          <p>For conversion-focused websites.</p>
        </div>
        <span class="checkmark-plan-badge">Popular</span>
      </div>
      <div class="checkmark-price">
        <strong>$49</strong>
        <span>/mo</span>
      </div>
      <div class="checkmark-summary">
        <div class="checkmark-summary-item">
          <strong>20</strong>
          <span>Projects</span>
        </div>
        <div class="checkmark-summary-item">
          <strong>Priority</strong>
          <span>Support</span>
        </div>
      </div>
      <div class="checkmark-feature-group">
        <p class="checkmark-feature-title">Included features</p>
        <ul class="checkmark-feature-list">
          <li>Responsive pricing layout</li>
          <li>Advanced CTA buttons</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
          <li class="is-muted">Custom integrations</li>
        </ul>
      </div>
      <a class="checkmark-button" href="#">Choose Growth</a>
    </article>

    <article class="checkmark-pricing-card">
      <div class="checkmark-plan-top">
        <div class="checkmark-plan-name">
          <h3>Scale</h3>
          <p>For teams and advanced projects.</p>
        </div>
        <span class="checkmark-plan-badge">Team</span>
      </div>
      <div class="checkmark-price">
        <strong>$129</strong>
        <span>/mo</span>
      </div>
      <div class="checkmark-summary">
        <div class="checkmark-summary-item">
          <strong>∞</strong>
          <span>Projects</span>
        </div>
        <div class="checkmark-summary-item">
          <strong>Custom</strong>
          <span>Support</span>
        </div>
      </div>
      <div class="checkmark-feature-group">
        <p class="checkmark-feature-title">Included features</p>
        <ul class="checkmark-feature-list">
          <li>Responsive pricing layout</li>
          <li>Advanced CTA buttons</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
          <li>Custom integrations</li>
        </ul>
      </div>
      <a class="checkmark-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.checkmark-pricing{
width:min(100%,1100px);
}

.checkmark-pricing-header{
max-width:760px;
margin:0 auto 30px;
text-align:center;
}

.checkmark-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.checkmark-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.checkmark-pricing-title span{
background:linear-gradient(135deg,#16a34a,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.checkmark-pricing-text{
max-width:660px;
margin:0 auto;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.checkmark-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:start;
}

.checkmark-pricing-card{
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.09);
}

.checkmark-pricing-card.is-featured{
border-color:rgba(34,197,94,.46);
box-shadow:0 30px 80px rgba(34,197,94,.16);
}

.checkmark-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.checkmark-plan-name h3{
margin:0 0 7px;
color:#0f172a;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.checkmark-plan-name p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:700;
}

.checkmark-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
white-space:nowrap;
}

.checkmark-pricing-card.is-featured .checkmark-plan-badge{
background:#16a34a;
color:#ffffff;
}

.checkmark-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:20px;
color:#0f172a;
}

.checkmark-price strong{
font-size:48px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.checkmark-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.checkmark-summary{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.checkmark-summary-item{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.checkmark-summary-item strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
font-weight:950;
}

.checkmark-summary-item span{
display:block;
color:#64748b;
font-size:11px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.checkmark-feature-group{
padding-top:18px;
border-top:1px solid rgba(15,23,42,.08);
margin-bottom:22px;
}

.checkmark-feature-title{
margin:0 0 12px;
color:#0f172a;
font-size:13px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}

.checkmark-feature-list{
display:grid;
gap:11px;
margin:0;
padding:0;
list-style:none;
}

.checkmark-feature-list li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.checkmark-feature-list li::before{
content:"✓";
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
width:20px;
height:20px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
}

.checkmark-feature-list li.is-muted{
color:#94a3b8;
text-decoration:line-through;
text-decoration-thickness:1px;
}

.checkmark-feature-list li.is-muted::before{
content:"–";
background:#f1f5f9;
color:#94a3b8;
}

.checkmark-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.checkmark-button:hover{
background:#16a34a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(22,163,74,.22);
}

.checkmark-pricing-card.is-featured .checkmark-button{
background:linear-gradient(135deg,#16a34a,#2563eb);
}

@media (max-width:960px){
.checkmark-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.checkmark-pricing-header{
text-align:left;
}

.checkmark-pricing-title{
font-size:34px;
}

.checkmark-pricing-card{
padding:20px;
border-radius:24px;
}

.checkmark-summary{
grid-template-columns:1fr;
}

.checkmark-plan-top{
flex-direction:column;
align-items:flex-start;
}
}

This pricing table with feature checkmarks is useful when plan differences need to be very clear. The included and unavailable states help users compare plans faster without reading long paragraphs.

23. CTA-Focused Pricing Table

CTA-focused pricing tables are designed to guide visitors toward action. Instead of treating the button as a small element at the bottom of each card, this layout makes the call-to-action area one of the strongest parts of the pricing section.

This example uses a conversion-focused pricing layout with a large CTA panel, plan cards, reassurance text, and a strong final decision area. It works well for landing pages, SaaS products, digital services, and subscription offers where the pricing section needs to push users toward signup.

• Designed for pricing sections where the CTA must be highly visible
• Uses a large conversion panel next to compact pricing plans
• Includes reassurance copy, trust points, and action-focused buttons
• Works well for SaaS, service landing pages, and digital products
• Responsive layout stacks the CTA panel above the pricing plans on mobile

HTML

<section class="cta-pricing">

  <div class="cta-pricing-panel">
    <div class="cta-pricing-panel-content">
      <div class="cta-pricing-kicker">CTA Focused Pricing</div>
      <h3 class="cta-pricing-title">Choose faster and <span>start today</span></h3>
      <p class="cta-pricing-text">This pricing section is built around action. The main CTA panel explains the value, reduces hesitation, and pushes visitors toward the next step.</p>

      <div class="cta-pricing-action-box">
        <strong>Ready to launch your pricing section?</strong>
        <p>Start with the recommended plan and upgrade later when your website grows.</p>
        <a class="cta-pricing-main-button" href="#">Start with Growth</a>
      </div>
    </div>

    <div class="cta-pricing-panel-bottom">
      <ul class="cta-pricing-trust">
        <li>No setup fees</li>
        <li>Cancel anytime</li>
        <li>Secure checkout</li>
      </ul>
    </div>
  </div>

  <div class="cta-pricing-plans">

    <article class="cta-pricing-plan">
      <div class="cta-pricing-plan-main">
        <div class="cta-pricing-plan-top">
          <h3>Starter</h3>
        </div>
        <p>For small landing pages and simple pricing blocks.</p>
        <div class="cta-pricing-plan-features">
          <span>1 project</span>
          <span>Email support</span>
          <span>Basic UI</span>
        </div>
      </div>
      <div class="cta-pricing-side">
        <div class="cta-pricing-price">
          <strong>$19</strong>
          <span>/month</span>
        </div>
        <a class="cta-pricing-button" href="#">Choose</a>
      </div>
    </article>

    <article class="cta-pricing-plan is-featured">
      <div class="cta-pricing-plan-main">
        <div class="cta-pricing-plan-top">
          <h3>Growth</h3>
          <span class="cta-pricing-badge">Recommended</span>
        </div>
        <p>For websites that need better conversion sections and stronger pricing UI.</p>
        <div class="cta-pricing-plan-features">
          <span>Unlimited sections</span>
          <span>Priority support</span>
          <span>CTA blocks</span>
        </div>
      </div>
      <div class="cta-pricing-side">
        <div class="cta-pricing-price">
          <strong>$59</strong>
          <span>/month</span>
        </div>
        <a class="cta-pricing-button" href="#">Choose</a>
      </div>
    </article>

    <article class="cta-pricing-plan">
      <div class="cta-pricing-plan-main">
        <div class="cta-pricing-plan-top">
          <h3>Scale</h3>
        </div>
        <p>For teams that need custom pricing components and premium support.</p>
        <div class="cta-pricing-plan-features">
          <span>Custom UI</span>
          <span>Team tools</span>
          <span>Dedicated support</span>
        </div>
      </div>
      <div class="cta-pricing-side">
        <div class="cta-pricing-price">
          <strong>$129</strong>
          <span>/month</span>
        </div>
        <a class="cta-pricing-button" href="#">Contact</a>
      </div>
    </article>

  </div>

</section>

CSS

.cta-pricing{
width:min(100%,1080px);
display:grid;
grid-template-columns:390px minmax(0,1fr);
gap:20px;
align-items:stretch;
}

.cta-pricing-panel{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:560px;
padding:30px;
border-radius:36px;
background:#111827;
color:#ffffff;
overflow:hidden;
box-shadow:0 32px 90px rgba(17,24,39,.26);
}

.cta-pricing-panel::before{
content:"";
position:absolute;
right:-110px;
top:-110px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(249,115,22,.28);
}

.cta-pricing-panel::after{
content:"";
position:absolute;
left:-110px;
bottom:-120px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(239,68,68,.20);
}

.cta-pricing-panel-content,
.cta-pricing-panel-bottom{
position:relative;
z-index:2;
}

.cta-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#fed7aa;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.cta-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,62px);
line-height:.98;
font-weight:950;
letter-spacing:-.07em;
}

.cta-pricing-title span{
color:#fb923c;
-webkit-text-fill-color:#fb923c;
}

.cta-pricing-text{
margin:0;
color:#e5e7eb;
font-size:16px;
line-height:1.75;
}

.cta-pricing-action-box{
display:grid;
gap:12px;
margin-top:34px;
padding:20px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.cta-pricing-action-box strong{
color:#ffffff;
font-size:20px;
line-height:1.2;
font-weight:950;
}

.cta-pricing-action-box p{
margin:0;
color:#d1d5db;
font-size:13px;
line-height:1.55;
font-weight:700;
}

.cta-pricing-main-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
border-radius:999px;
background:linear-gradient(135deg,#f97316,#ef4444);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 16px 38px rgba(249,115,22,.24);
transition:transform .22s ease,box-shadow .22s ease;
}

.cta-pricing-main-button:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 22px 48px rgba(249,115,22,.30);
}

.cta-pricing-trust{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.cta-pricing-trust li{
display:flex;
gap:10px;
align-items:center;
margin:0;
color:#e5e7eb;
font-size:13px;
font-weight:800;
}

.cta-pricing-trust li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:20px;
height:20px;
border-radius:999px;
background:rgba(34,197,94,.16);
color:#86efac;
font-size:12px;
font-weight:950;
}

.cta-pricing-plans{
display:grid;
gap:14px;
align-content:stretch;
}

.cta-pricing-plan{
display:grid;
grid-template-columns:minmax(0,1fr) 150px;
gap:18px;
align-items:center;
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.cta-pricing-plan.is-featured{
border-color:rgba(249,115,22,.46);
box-shadow:0 28px 80px rgba(249,115,22,.16);
}

.cta-pricing-plan-main{
min-width:0;
}

.cta-pricing-plan-top{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.cta-pricing-plan h3{
margin:0;
color:#111827;
font-size:23px;
line-height:1.18;
font-weight:950;
}

.cta-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.cta-pricing-plan p{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.cta-pricing-plan-features{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}

.cta-pricing-plan-features span{
display:inline-flex;
align-items:center;
padding:7px 9px;
border-radius:999px;
background:#f8fafc;
color:#475569;
font-size:12px;
line-height:1;
font-weight:850;
}

.cta-pricing-side{
display:grid;
justify-items:end;
gap:12px;
}

.cta-pricing-price{
text-align:right;
color:#111827;
}

.cta-pricing-price strong{
display:block;
font-size:36px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.cta-pricing-price span{
display:block;
margin-top:5px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.cta-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 15px;
border-radius:999px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.cta-pricing-button:hover{
background:#f97316;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(249,115,22,.22);
}

.cta-pricing-plan.is-featured .cta-pricing-button{
background:linear-gradient(135deg,#f97316,#ef4444);
}

@media (max-width:960px){
.cta-pricing{
grid-template-columns:1fr;
max-width:680px;
}

.cta-pricing-panel{
min-height:auto;
}
}

@media (max-width:700px){
.cta-pricing-plan{
grid-template-columns:1fr;
}

.cta-pricing-side{
justify-items:start;
}

.cta-pricing-price{
text-align:left;
}
}

@media (max-width:640px){
.cta-pricing-panel{
padding:24px;
border-radius:28px;
}

.cta-pricing-title{
font-size:38px;
}

.cta-pricing-plan{
padding:18px;
border-radius:22px;
}

.cta-pricing-button{
width:100%;
}
}

This CTA-focused pricing table is useful when the goal is not only to compare plans, but also to push users toward a specific action. The large CTA panel helps reduce hesitation and makes the pricing section feel more conversion-driven.

24. Startup Pricing Table

Startup pricing tables should feel simple, scalable, and growth-oriented. Early-stage companies often need pricing that explains the path from launch to growth to scale without overwhelming visitors with too many technical details.

This example uses a startup journey layout. The pricing plans are arranged as stages of growth, with a timeline-style connector, stage numbers, startup-friendly labels, and clear upgrade logic. This makes the section feel different from a standard pricing card grid.

• Designed for startups, SaaS products, MVP tools, and early-stage platforms
• Uses a growth-stage journey layout instead of plain pricing cards
• Shows launch, grow, and scale as a clear upgrade path
• Includes stage numbers, milestone labels, pricing, and key benefits
• Responsive layout stacks the startup journey cards on mobile

HTML

<section class="startup-pricing">

  <div class="startup-pricing-header">
    <div class="startup-pricing-kicker">Startup Pricing</div>
    <h3 class="startup-pricing-title">Pricing that grows with your <span>startup journey</span></h3>
    <p class="startup-pricing-text">Use this layout when your pricing should explain a clear path from launch to growth to scale.</p>
  </div>

  <div class="startup-pricing-journey">

    <article class="startup-pricing-step">
      <div class="startup-step-marker">
        <span class="startup-step-number">01</span>
        <span class="startup-step-label">Launch</span>
      </div>
      <h3>MVP</h3>
      <p class="startup-step-desc">For early products, test launches, and simple landing pages.</p>
      <div class="startup-step-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <div class="startup-milestone">
        <strong>Best milestone</strong>
        <span>Validate your idea with a clean pricing section and basic conversion flow.</span>
      </div>
      <ul class="startup-step-list">
        <li>One project workspace</li>
        <li>Basic pricing components</li>
        <li>Email support</li>
      </ul>
      <a class="startup-step-button" href="#">Start MVP</a>
    </article>

    <article class="startup-pricing-step is-featured">
      <div class="startup-step-marker">
        <span class="startup-step-number">02</span>
        <span class="startup-step-label">Grow</span>
      </div>
      <h3>Traction</h3>
      <p class="startup-step-desc">For startups that need more sections, better conversion tools, and stronger plan comparison.</p>
      <div class="startup-step-price">
        <strong>$59</strong>
        <span>/mo</span>
      </div>
      <div class="startup-milestone">
        <strong>Best milestone</strong>
        <span>Turn early traffic into signups with clearer pricing and stronger CTA design.</span>
      </div>
      <ul class="startup-step-list">
        <li>Unlimited pricing sections</li>
        <li>Advanced conversion blocks</li>
        <li>Priority support</li>
      </ul>
      <a class="startup-step-button" href="#">Choose Traction</a>
    </article>

    <article class="startup-pricing-step">
      <div class="startup-step-marker">
        <span class="startup-step-number">03</span>
        <span class="startup-step-label">Scale</span>
      </div>
      <h3>Scaleup</h3>
      <p class="startup-step-desc">For teams that need a reusable UI system, custom pricing flows, and dedicated support.</p>
      <div class="startup-step-price">
        <strong>$149</strong>
        <span>/mo</span>
      </div>
      <div class="startup-milestone">
        <strong>Best milestone</strong>
        <span>Build a scalable pricing experience for multiple products, pages, or markets.</span>
      </div>
      <ul class="startup-step-list">
        <li>Custom pricing system</li>
        <li>Team-ready components</li>
        <li>Dedicated support</li>
      </ul>
      <a class="startup-step-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="startup-pricing-footer">
    <span>Built for MVPs</span>
    <span>Upgrade anytime</span>
    <span>Startup-friendly plans</span>
    <span>Responsive CSS</span>
  </div>

</section>

CSS

.startup-pricing{
width:min(100%,1080px);
}

.startup-pricing-header{
max-width:760px;
margin:0 auto 34px;
text-align:center;
}

.startup-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0e7ff;
color:#4338ca;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.startup-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.startup-pricing-title span{
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.startup-pricing-text{
max-width:660px;
margin:0 auto;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.startup-pricing-journey{
position:relative;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.startup-pricing-journey::before{
content:"";
position:absolute;
left:12%;
right:12%;
top:52px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#4f46e5,#0ea5e9);
opacity:.28;
}

.startup-pricing-step{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
padding:22px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.09);
}

.startup-pricing-step.is-featured{
border-color:rgba(79,70,229,.42);
box-shadow:0 32px 88px rgba(79,70,229,.16);
transform:translateY(-10px);
}

.startup-step-marker{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:22px;
}

.startup-step-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:62px;
height:62px;
border-radius:22px;
background:#0f172a;
color:#ffffff;
font-size:20px;
font-weight:950;
box-shadow:0 16px 38px rgba(15,23,42,.18);
}

.startup-pricing-step.is-featured .startup-step-number{
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
}

.startup-step-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.startup-pricing-step.is-featured .startup-step-label{
background:#e0e7ff;
color:#4338ca;
}

.startup-pricing-step h3{
margin:0 0 8px;
color:#0f172a;
font-size:25px;
line-height:1.15;
font-weight:950;
}

.startup-step-desc{
min-height:72px;
margin:0 0 22px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.startup-step-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:20px;
color:#0f172a;
}

.startup-step-price strong{
font-size:50px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.startup-step-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.startup-milestone{
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
margin-bottom:22px;
}

.startup-milestone strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:14px;
font-weight:950;
}

.startup-milestone span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.startup-step-list{
display:grid;
gap:10px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.startup-step-list li{
position:relative;
margin:0;
padding-left:26px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.startup-step-list li::before{
content:"";
position:absolute;
left:0;
top:7px;
width:9px;
height:9px;
border-radius:999px;
background:#4f46e5;
box-shadow:0 0 0 4px rgba(79,70,229,.10);
}

.startup-step-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.startup-step-button:hover{
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(79,70,229,.22);
}

.startup-pricing-step.is-featured .startup-step-button{
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
}

.startup-pricing-footer{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:22px;
}

.startup-pricing-footer span{
display:inline-flex;
align-items:center;
padding:8px 10px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#64748b;
font-size:12px;
font-weight:850;
}

@media (max-width:960px){
.startup-pricing-journey{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.startup-pricing-journey::before{
display:none;
}

.startup-pricing-step.is-featured{
transform:none;
}
}

@media (max-width:640px){
.startup-pricing-header{
text-align:left;
}

.startup-pricing-title{
font-size:34px;
}

.startup-pricing-step{
padding:20px;
border-radius:26px;
}

.startup-step-desc{
min-height:auto;
}

.startup-step-price strong{
font-size:42px;
}

.startup-pricing-footer{
justify-content:flex-start;
}
}

This startup pricing table is useful when pricing needs to explain growth stages instead of only comparing features. The journey layout makes the upgrade path feel natural for startups moving from MVP to traction to scale.

25. Enterprise / Contact Sales Pricing Table

Enterprise pricing tables are different from standard pricing cards because large customers usually need custom contracts, security reviews, onboarding, account management, service-level agreements, and flexible usage limits. Instead of forcing a fixed price, this layout focuses on value, trust, and contacting sales.

This example uses a split enterprise pricing section with a large “Contact Sales” panel, security and support details, and smaller comparison cards for self-service plans. It works well for B2B SaaS websites, enterprise platforms, API products, hosting services, and software companies that sell to larger teams.

• Designed for enterprise SaaS, B2B platforms, API products, and larger teams
• Uses a custom quote panel instead of a normal monthly price card
• Highlights SLA, security, onboarding, support, and account management
• Includes smaller self-service plans for comparison
• Responsive layout stacks the enterprise offer above plan cards on mobile

HTML

<section class="enterprise-pricing">

  <div class="enterprise-pricing-main">
    <div class="enterprise-pricing-main-content">
      <div class="enterprise-pricing-kicker">Enterprise Pricing</div>
      <h3 class="enterprise-pricing-title">Custom pricing for <span>serious teams</span></h3>
      <p class="enterprise-pricing-text">Use this layout when your largest customers need custom contracts, onboarding, security reviews, support agreements, and flexible usage limits.</p>

      <div class="enterprise-pricing-quote">
        <span class="enterprise-pricing-quote-label">Enterprise plan</span>
        <div class="enterprise-pricing-quote-price">Custom quote</div>
        <p>Built around your team size, usage, security needs, integrations, and support requirements.</p>
        <a class="enterprise-pricing-button" href="#">Contact Sales</a>
      </div>
    </div>

    <div class="enterprise-pricing-main-bottom">
      <div class="enterprise-pricing-trust">
        <div class="enterprise-pricing-trust-item">
          <strong>99.9% SLA</strong>
          <span>Custom uptime and support commitments.</span>
        </div>
        <div class="enterprise-pricing-trust-item">
          <strong>Security</strong>
          <span>SSO, roles, audit logs, and reviews.</span>
        </div>
        <div class="enterprise-pricing-trust-item">
          <strong>Onboarding</strong>
          <span>Dedicated launch and migration support.</span>
        </div>
      </div>
    </div>
  </div>

  <div class="enterprise-pricing-side">

    <article class="enterprise-pricing-plan">
      <div>
        <h3>Starter</h3>
        <p>For smaller teams that want self-service pricing and simple setup.</p>
        <div class="enterprise-pricing-plan-tags">
          <span>5 seats</span>
          <span>Email support</span>
          <span>Basic limits</span>
        </div>
      </div>
      <div class="enterprise-pricing-side-price">
        <strong>$49</strong>
        <span>/month</span>
        <a class="enterprise-pricing-side-button" href="#">Start</a>
      </div>
    </article>

    <article class="enterprise-pricing-plan is-featured">
      <div>
        <h3>Business</h3>
        <p>For growing teams that need more usage, priority support, and advanced controls.</p>
        <div class="enterprise-pricing-plan-tags">
          <span>25 seats</span>
          <span>Priority support</span>
          <span>Advanced roles</span>
        </div>
      </div>
      <div class="enterprise-pricing-side-price">
        <strong>$199</strong>
        <span>/month</span>
        <a class="enterprise-pricing-side-button" href="#">Choose</a>
      </div>
    </article>

    <div class="enterprise-pricing-checklist">
      <h3>Enterprise includes</h3>
      <ul>
        <li>Dedicated account manager</li>
        <li>Custom usage limits and billing terms</li>
        <li>Security review and compliance support</li>
        <li>SSO, audit logs, and advanced permissions</li>
        <li>Priority onboarding and migration assistance</li>
      </ul>
    </div>

  </div>

</section>

CSS

.enterprise-pricing{
width:min(100%,1100px);
display:grid;
grid-template-columns:1.05fr .95fr;
gap:22px;
align-items:stretch;
}

.enterprise-pricing-main{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:560px;
padding:32px;
border-radius:38px;
background:#0f172a;
color:#ffffff;
overflow:hidden;
box-shadow:0 34px 90px rgba(15,23,42,.28);
}

.enterprise-pricing-main::before{
content:"";
position:absolute;
right:-110px;
top:-110px;
width:320px;
height:320px;
border-radius:999px;
background:rgba(37,99,235,.28);
}

.enterprise-pricing-main::after{
content:"";
position:absolute;
left:-120px;
bottom:-130px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(14,165,233,.14);
}

.enterprise-pricing-main-content,
.enterprise-pricing-main-bottom{
position:relative;
z-index:2;
}

.enterprise-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#bfdbfe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.enterprise-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,64px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
}

.enterprise-pricing-title span{
background:linear-gradient(90deg,#60a5fa,#22d3ee);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.enterprise-pricing-text{
max-width:620px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.enterprise-pricing-quote{
display:grid;
gap:14px;
margin-top:34px;
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.enterprise-pricing-quote-label{
color:#93c5fd;
font-size:12px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.enterprise-pricing-quote-price{
color:#ffffff;
font-size:48px;
line-height:.95;
font-weight:950;
letter-spacing:-.06em;
}

.enterprise-pricing-quote p{
margin:0;
color:#dbeafe;
font-size:14px;
line-height:1.55;
font-weight:700;
}

.enterprise-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
border-radius:999px;
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.enterprise-pricing-button:hover{
background:#dbeafe;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
transform:translateY(-2px);
box-shadow:0 18px 42px rgba(255,255,255,.16);
}

.enterprise-pricing-trust{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:28px;
}

.enterprise-pricing-trust-item{
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.enterprise-pricing-trust-item strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:14px;
font-weight:950;
}

.enterprise-pricing-trust-item span{
display:block;
color:#cbd5e1;
font-size:12px;
line-height:1.45;
font-weight:700;
}

.enterprise-pricing-side{
display:grid;
gap:14px;
}

.enterprise-pricing-plan{
display:grid;
grid-template-columns:minmax(0,1fr) 132px;
gap:18px;
align-items:center;
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.enterprise-pricing-plan.is-featured{
border-color:rgba(37,99,235,.42);
box-shadow:0 28px 80px rgba(37,99,235,.14);
}

.enterprise-pricing-plan h3{
margin:0 0 7px;
color:#0f172a;
font-size:22px;
line-height:1.18;
font-weight:950;
}

.enterprise-pricing-plan p{
margin:0 0 12px;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.enterprise-pricing-plan-tags{
display:flex;
flex-wrap:wrap;
gap:7px;
}

.enterprise-pricing-plan-tags span{
display:inline-flex;
align-items:center;
padding:7px 9px;
border-radius:999px;
background:#f8fafc;
color:#475569;
font-size:12px;
line-height:1;
font-weight:850;
}

.enterprise-pricing-side-price{
text-align:right;
color:#0f172a;
}

.enterprise-pricing-side-price strong{
display:block;
font-size:32px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.enterprise-pricing-side-price span{
display:block;
margin-top:5px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.enterprise-pricing-side-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:40px;
margin-top:12px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:12px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}

.enterprise-pricing-side-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
}

.enterprise-pricing-checklist{
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.enterprise-pricing-checklist h3{
margin:0 0 14px;
color:#0f172a;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.enterprise-pricing-checklist ul{
display:grid;
gap:11px;
margin:0;
padding:0;
list-style:none;
}

.enterprise-pricing-checklist li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.enterprise-pricing-checklist li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:20px;
height:20px;
border-radius:999px;
background:#dbeafe;
color:#2563eb;
font-size:12px;
font-weight:950;
}

@media (max-width:980px){
.enterprise-pricing{
grid-template-columns:1fr;
max-width:720px;
}

.enterprise-pricing-main{
min-height:auto;
}
}

@media (max-width:720px){
.enterprise-pricing-plan{
grid-template-columns:1fr;
}

.enterprise-pricing-side-price{
text-align:left;
}

.enterprise-pricing-trust{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.enterprise-pricing-main{
padding:24px;
border-radius:28px;
}

.enterprise-pricing-title{
font-size:38px;
}

.enterprise-pricing-quote-price{
font-size:38px;
}

.enterprise-pricing-plan,
.enterprise-pricing-checklist{
padding:18px;
border-radius:22px;
}
}

This enterprise pricing table is useful when a fixed public price is not enough. The layout gives enterprise buyers the information they expect: custom quote, support level, SLA, onboarding, security, and a clear contact sales CTA.

26. Product Pricing Table

Product pricing tables are useful when you sell a digital product, plugin, template pack, design kit, software license, or downloadable product. Instead of comparing monthly subscriptions, this layout compares purchase options such as single license, bundle, and lifetime deal.

This example uses a product-focused pricing layout with a product preview panel, license cards, update/support information, and a purchase-focused CTA. It works well for WordPress plugins, UI kits, SaaS templates, design systems, digital downloads, and software products.

• Designed for plugins, templates, UI kits, software licenses, and digital products
• Compares product purchase options instead of monthly SaaS plans
• Includes license limits, updates, support period, and lifetime deal option
• Uses a product preview panel to make the offer feel more tangible
• Responsive layout stacks product information above purchase options on mobile

HTML

<section class="product-pricing">

  <aside class="product-pricing-showcase">
    <div class="product-pricing-showcase-inner">
      <div class="product-pricing-kicker">Product Pricing</div>
      <h3 class="product-pricing-title">Buy the full <span>UI product kit</span></h3>
      <p class="product-pricing-text">Use this pricing layout for plugins, templates, digital downloads, design kits, and software license pages.</p>

      <div class="product-pricing-preview-card">
        <div class="product-pricing-preview-window">
          <div class="product-pricing-window-top">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="product-pricing-window-body">
            <div class="product-pricing-window-line"></div>
            <div class="product-pricing-window-line is-short"></div>
            <div class="product-pricing-window-grid">
              <div class="product-pricing-window-box"></div>
              <div class="product-pricing-window-box"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="product-pricing-meta">
        <div class="product-pricing-meta-item">
          <strong>120+</strong>
          <span>Ready UI sections</span>
        </div>
        <div class="product-pricing-meta-item">
          <strong>1 year</strong>
          <span>Updates included</span>
        </div>
      </div>
    </div>
  </aside>

  <div class="product-pricing-options">

    <article class="product-pricing-option">
      <div class="product-pricing-option-main">
        <div class="product-pricing-option-top">
          <h3>Single License</h3>
          <span class="product-pricing-badge">Starter</span>
        </div>
        <p>For one website, one product launch, or a small personal project.</p>
        <div class="product-pricing-license">
          <div class="product-pricing-license-item">
            <strong>1 site</strong>
            <span>License use</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>1 year</strong>
            <span>Updates</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>Email</strong>
            <span>Support</span>
          </div>
        </div>
      </div>
      <div class="product-pricing-side">
        <div class="product-pricing-price">
          <strong>$49</strong>
          <span>one-time</span>
        </div>
        <a class="product-pricing-button" href="#">Buy License</a>
      </div>
    </article>

    <article class="product-pricing-option is-featured">
      <div class="product-pricing-option-main">
        <div class="product-pricing-option-top">
          <h3>Creator Bundle</h3>
          <span class="product-pricing-badge">Best value</span>
        </div>
        <p>For creators, developers, and agencies building several landing pages or product websites.</p>
        <div class="product-pricing-license">
          <div class="product-pricing-license-item">
            <strong>10 sites</strong>
            <span>License use</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>1 year</strong>
            <span>Updates</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>Priority</strong>
            <span>Support</span>
          </div>
        </div>
      </div>
      <div class="product-pricing-side">
        <div class="product-pricing-price">
          <del>$149</del>
          <strong>$99</strong>
          <span>one-time</span>
        </div>
        <a class="product-pricing-button" href="#">Buy Bundle</a>
      </div>
    </article>

    <article class="product-pricing-option">
      <div class="product-pricing-option-main">
        <div class="product-pricing-option-top">
          <h3>Lifetime Deal</h3>
          <span class="product-pricing-badge">Lifetime</span>
        </div>
        <p>For teams and agencies that want unlimited project flexibility and long-term value.</p>
        <div class="product-pricing-license">
          <div class="product-pricing-license-item">
            <strong>Unlimited</strong>
            <span>License use</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>Lifetime</strong>
            <span>Updates</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>VIP</strong>
            <span>Support</span>
          </div>
        </div>
      </div>
      <div class="product-pricing-side">
        <div class="product-pricing-price">
          <del>$399</del>
          <strong>$249</strong>
          <span>one-time</span>
        </div>
        <a class="product-pricing-button" href="#">Get Lifetime</a>
      </div>
    </article>

    <div class="product-pricing-guarantee">
      <h3>30-day product guarantee</h3>
      <p>Add a short guarantee block below your product pricing table to reduce purchase hesitation. This is especially useful for templates, plugins, digital downloads, and software products.</p>
    </div>

  </div>

</section>

CSS

.product-pricing{
width:min(100%,1100px);
display:grid;
grid-template-columns:380px minmax(0,1fr);
gap:22px;
align-items:start;
}

.product-pricing-showcase{
position:sticky;
top:0;
padding:26px;
border-radius:36px;
background:#111827;
color:#ffffff;
box-shadow:0 34px 90px rgba(17,24,39,.24);
overflow:hidden;
}

.product-pricing-showcase::before{
content:"";
position:absolute;
right:-100px;
top:-100px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(234,179,8,.26);
}

.product-pricing-showcase::after{
content:"";
position:absolute;
left:-100px;
bottom:-110px;
width:260px;
height:260px;
border-radius:999px;
background:rgba(249,115,22,.18);
}

.product-pricing-showcase-inner{
position:relative;
z-index:2;
}

.product-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#fde68a;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.product-pricing-title{
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.product-pricing-title span{
color:#facc15;
-webkit-text-fill-color:#facc15;
}

.product-pricing-text{
margin:0 0 24px;
color:#e5e7eb;
font-size:15px;
line-height:1.75;
}

.product-pricing-preview-card{
padding:18px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
margin-bottom:18px;
}

.product-pricing-preview-window{
border-radius:22px;
background:#ffffff;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.24);
}

.product-pricing-window-top{
display:flex;
gap:6px;
align-items:center;
height:34px;
padding:0 12px;
background:#f8fafc;
border-bottom:1px solid rgba(15,23,42,.08);
}

.product-pricing-window-top span{
width:9px;
height:9px;
border-radius:999px;
background:#cbd5e1;
}

.product-pricing-window-body{
padding:18px;
}

.product-pricing-window-line{
height:10px;
border-radius:999px;
background:#e2e8f0;
margin-bottom:10px;
}

.product-pricing-window-line.is-short{
width:64%;
}

.product-pricing-window-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:16px;
}

.product-pricing-window-box{
height:70px;
border-radius:18px;
background:linear-gradient(135deg,#fef3c7,#fff7ed);
border:1px solid rgba(234,179,8,.16);
}

.product-pricing-meta{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.product-pricing-meta-item{
padding:13px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.product-pricing-meta-item strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:18px;
font-weight:950;
}

.product-pricing-meta-item span{
display:block;
color:#fde68a;
font-size:12px;
line-height:1.4;
font-weight:800;
}

.product-pricing-options{
display:grid;
gap:14px;
}

.product-pricing-option{
display:grid;
grid-template-columns:minmax(0,1fr) 170px;
gap:18px;
align-items:stretch;
padding:22px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.product-pricing-option.is-featured{
border-color:rgba(234,179,8,.55);
box-shadow:0 30px 80px rgba(234,179,8,.16);
}

.product-pricing-option-main{
min-width:0;
}

.product-pricing-option-top{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.product-pricing-option h3{
margin:0;
color:#111827;
font-size:24px;
line-height:1.18;
font-weight:950;
}

.product-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#fef3c7;
color:#92400e;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.product-pricing-option p{
margin:0 0 14px;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.product-pricing-license{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.product-pricing-license-item{
padding:11px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.product-pricing-license-item strong{
display:block;
margin-bottom:4px;
color:#111827;
font-size:13px;
font-weight:950;
}

.product-pricing-license-item span{
display:block;
color:#64748b;
font-size:11px;
line-height:1.35;
font-weight:800;
}

.product-pricing-side{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:14px;
padding:18px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.product-pricing-price{
color:#111827;
text-align:right;
}

.product-pricing-price del{
display:block;
margin-bottom:5px;
color:#94a3b8;
font-size:14px;
font-weight:850;
}

.product-pricing-price strong{
display:block;
font-size:38px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.product-pricing-price span{
display:block;
margin-top:5px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.product-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
border-radius:999px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.product-pricing-button:hover{
background:#ca8a04;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(202,138,4,.22);
}

.product-pricing-option.is-featured .product-pricing-button{
background:linear-gradient(135deg,#eab308,#f97316);
}

.product-pricing-guarantee{
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.product-pricing-guarantee h3{
margin:0 0 8px;
color:#111827;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.product-pricing-guarantee p{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:650;
}

@media (max-width:980px){
.product-pricing{
grid-template-columns:1fr;
max-width:720px;
}

.product-pricing-showcase{
position:relative;
}
}

@media (max-width:740px){
.product-pricing-option{
grid-template-columns:1fr;
}

.product-pricing-price{
text-align:left;
}

.product-pricing-license{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.product-pricing-showcase{
padding:22px;
border-radius:28px;
}

.product-pricing-title{
font-size:34px;
}

.product-pricing-option,
.product-pricing-guarantee{
padding:18px;
border-radius:22px;
}

.product-pricing-meta{
grid-template-columns:1fr;
}
}

This product pricing table is useful when you sell a specific digital product instead of a recurring SaaS subscription. The layout compares licenses, update periods, support levels, and bundle options in a way that feels natural for plugins, templates, UI kits, and software products.

27. Pricing Table with Trust Badges

Pricing tables with trust badges are useful when visitors need reassurance before they choose a plan. Security badges, guarantees, payment notes, review scores, and support promises can make a pricing section feel safer and more credible.

This example places trust elements directly inside the pricing layout instead of hiding them below the section. The plans are supported by a trust badge bar, guarantee card, customer rating, and secure checkout message, which makes the pricing table stronger for SaaS products, digital services, ecommerce tools, and software offers.

• Combines pricing cards with trust badges and reassurance elements
• Useful for SaaS, software, ecommerce, hosting, and service websites
• Includes guarantee, secure checkout, rating, and support badges
• Helps reduce hesitation near the pricing decision
• Responsive layout stacks pricing cards and trust blocks cleanly on mobile

HTML

<section class="trust-pricing">

  <div class="trust-pricing-header">
    <div>
      <div class="trust-pricing-kicker">Trust Badges</div>
      <h3 class="trust-pricing-title">Pricing that feels <span>safe to choose</span></h3>
    </div>
    <div class="trust-pricing-rating">
      <div class="trust-pricing-stars">★★★★★</div>
      <strong>Rated 4.9 by customers</strong>
      <span>Use social proof near pricing to reduce hesitation and build confidence.</span>
    </div>
  </div>

  <div class="trust-pricing-badges">
    <div class="trust-pricing-badge">
      <span class="trust-pricing-badge-icon">✓</span>
      <div>
        <strong>30-day guarantee</strong>
        <span>Risk-free purchase</span>
      </div>
    </div>
    <div class="trust-pricing-badge">
      <span class="trust-pricing-badge-icon">🔒</span>
      <div>
        <strong>Secure checkout</strong>
        <span>Encrypted payment</span>
      </div>
    </div>
    <div class="trust-pricing-badge">
      <span class="trust-pricing-badge-icon">💬</span>
      <div>
        <strong>Fast support</strong>
        <span>Help when needed</span>
      </div>
    </div>
    <div class="trust-pricing-badge">
      <span class="trust-pricing-badge-icon">↺</span>
      <div>
        <strong>Cancel anytime</strong>
        <span>No hidden lock-in</span>
      </div>
    </div>
  </div>

  <div class="trust-pricing-layout">

    <div class="trust-pricing-cards">

      <article class="trust-pricing-card">
        <div class="trust-pricing-card-top">
          <span class="trust-pricing-plan-label">Start</span>
        </div>
        <h3>Basic</h3>
        <p>For smaller websites that need a clean and trusted pricing section.</p>
        <div class="trust-pricing-price">
          <strong>$19</strong>
          <span>/mo</span>
        </div>
        <ul class="trust-pricing-features">
          <li>Basic pricing UI</li>
          <li>Email support</li>
          <li>Secure checkout note</li>
        </ul>
        <a class="trust-pricing-button" href="#">Choose Basic</a>
      </article>

      <article class="trust-pricing-card is-featured">
        <div class="trust-pricing-card-top">
          <span class="trust-pricing-plan-label">Popular</span>
        </div>
        <h3>Growth</h3>
        <p>For conversion-focused websites that need stronger trust and support signals.</p>
        <div class="trust-pricing-price">
          <strong>$59</strong>
          <span>/mo</span>
        </div>
        <ul class="trust-pricing-features">
          <li>Advanced pricing UI</li>
          <li>Priority support</li>
          <li>Trust badge system</li>
        </ul>
        <a class="trust-pricing-button" href="#">Choose Growth</a>
      </article>

      <article class="trust-pricing-card">
        <div class="trust-pricing-card-top">
          <span class="trust-pricing-plan-label">Scale</span>
        </div>
        <h3>Premium</h3>
        <p>For teams that need a complete pricing section with support and reassurance.</p>
        <div class="trust-pricing-price">
          <strong>$129</strong>
          <span>/mo</span>
        </div>
        <ul class="trust-pricing-features">
          <li>Custom pricing layout</li>
          <li>Dedicated support</li>
          <li>Advanced trust blocks</li>
        </ul>
        <a class="trust-pricing-button" href="#">Contact Sales</a>
      </article>

    </div>

    <aside class="trust-pricing-sidebar">
      <div class="trust-pricing-guarantee">
        <h3>Money-back guarantee</h3>
        <p>Adding a guarantee beside your pricing table helps visitors feel safer before they click the purchase button.</p>
        <div class="trust-pricing-secure">
          <span>🔒</span>
          Secure checkout included
        </div>
      </div>

      <div class="trust-pricing-support">
        <h3>Need help choosing?</h3>
        <p>Trust-focused pricing sections can also include a short support block so users know they can ask questions before buying.</p>
      </div>
    </aside>

  </div>

</section>

CSS

.trust-pricing{
width:min(100%,1100px);
}

.trust-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:24px;
align-items:end;
margin-bottom:24px;
}

.trust-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.trust-pricing-title{
margin:0;
max-width:760px;
color:#052e16;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.trust-pricing-title span{
background:linear-gradient(135deg,#16a34a,#0891b2);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.trust-pricing-rating{
padding:18px;
border-radius:26px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 40px rgba(15,23,42,.08);
}

.trust-pricing-stars{
margin-bottom:8px;
color:#f59e0b;
font-size:20px;
letter-spacing:.05em;
}

.trust-pricing-rating strong{
display:block;
margin-bottom:4px;
color:#052e16;
font-size:16px;
font-weight:950;
}

.trust-pricing-rating span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.trust-pricing-badges{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:18px;
}

.trust-pricing-badge{
display:flex;
gap:10px;
align-items:center;
padding:14px;
border-radius:20px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.trust-pricing-badge-icon{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:14px;
background:#dcfce7;
color:#15803d;
font-size:16px;
font-weight:950;
}

.trust-pricing-badge strong{
display:block;
margin-bottom:2px;
color:#052e16;
font-size:13px;
line-height:1.2;
font-weight:950;
}

.trust-pricing-badge span{
display:block;
color:#64748b;
font-size:11px;
line-height:1.25;
font-weight:750;
}

.trust-pricing-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 310px;
gap:18px;
align-items:stretch;
}

.trust-pricing-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
align-items:stretch;
}

.trust-pricing-card{
display:flex;
flex-direction:column;
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.trust-pricing-card.is-featured{
border-color:rgba(34,197,94,.48);
box-shadow:0 30px 80px rgba(34,197,94,.16);
}

.trust-pricing-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
margin-bottom:18px;
}

.trust-pricing-plan-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.trust-pricing-card.is-featured .trust-pricing-plan-label{
background:#052e16;
color:#ffffff;
}

.trust-pricing-card h3{
margin:0 0 8px;
color:#052e16;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.trust-pricing-card p{
min-height:66px;
margin:0 0 20px;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.trust-pricing-price{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:20px;
color:#052e16;
}

.trust-pricing-price strong{
font-size:44px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.trust-pricing-price span{
padding-bottom:5px;
color:#64748b;
font-size:13px;
font-weight:850;
}

.trust-pricing-features{
display:grid;
gap:10px;
margin:0 0 22px;
padding:0;
list-style:none;
}

.trust-pricing-features li{
position:relative;
margin:0;
padding-left:25px;
color:#334155;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.trust-pricing-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:17px;
height:17px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:10px;
font-weight:950;
}

.trust-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:46px;
margin-top:auto;
border-radius:999px;
background:#052e16;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.trust-pricing-button:hover{
background:#16a34a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(22,163,74,.22);
}

.trust-pricing-card.is-featured .trust-pricing-button{
background:linear-gradient(135deg,#16a34a,#0891b2);
}

.trust-pricing-sidebar{
display:flex;
flex-direction:column;
gap:14px;
}

.trust-pricing-guarantee,
.trust-pricing-support{
padding:22px;
border-radius:28px;
background:#052e16;
color:#ffffff;
box-shadow:0 24px 70px rgba(5,46,22,.20);
overflow:hidden;
position:relative;
}

.trust-pricing-support{
background:#ffffff;
color:#052e16;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.trust-pricing-guarantee h3,
.trust-pricing-support h3{
margin:0 0 10px;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.trust-pricing-guarantee p,
.trust-pricing-support p{
margin:0;
font-size:14px;
line-height:1.65;
font-weight:700;
}

.trust-pricing-guarantee p{
color:#dcfce7;
}

.trust-pricing-support p{
color:#64748b;
}

.trust-pricing-secure{
display:flex;
align-items:center;
gap:10px;
margin-top:18px;
padding:13px;
border-radius:18px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
font-size:13px;
font-weight:850;
}

.trust-pricing-secure span{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:999px;
background:rgba(134,239,172,.16);
color:#86efac;
font-size:13px;
font-weight:950;
}

@media (max-width:1040px){
.trust-pricing-header,
.trust-pricing-layout{
grid-template-columns:1fr;
}

.trust-pricing-badges{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.trust-pricing-sidebar{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:820px){
.trust-pricing-cards{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.trust-pricing-sidebar{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.trust-pricing-title{
font-size:34px;
}

.trust-pricing-badges{
grid-template-columns:1fr;
}

.trust-pricing-card,
.trust-pricing-guarantee,
.trust-pricing-support{
padding:18px;
border-radius:22px;
}

.trust-pricing-card p{
min-height:auto;
}
}

This pricing table with trust badges is useful when the pricing decision needs extra reassurance. By placing badges, ratings, guarantee text, and support information close to the plans, the section can reduce hesitation and make the CTA feel safer.

28. Mobile-First Pricing Table

Mobile-first pricing tables are designed for small screens first. Instead of starting with a large desktop grid and trying to shrink it, this layout begins as a clean stacked mobile pricing flow and then expands into a wider layout on larger screens.

This example uses compact stacked plan cards, sticky-style plan summaries, large touch-friendly buttons, and short feature rows. It works well for landing pages where most traffic comes from mobile devices and the pricing table must be easy to read without pinching or horizontal scrolling.

• Built with a mobile-first stacked layout
• Uses large touch-friendly buttons and compact plan summaries
• Avoids horizontal scrolling and cramped feature comparison tables
• Expands into a two-column desktop layout on wider screens
• Best for SaaS, apps, services, and mobile-heavy landing pages

HTML

<section class="mobile-first-pricing">

  <div class="mobile-first-shell">
    <div class="mobile-first-screen">

      <div class="mobile-first-layout">

        <div class="mobile-first-header">
          <div class="mobile-first-kicker">Mobile First</div>
          <h3 class="mobile-first-title">Pricing built for <span>small screens first</span></h3>
          <p class="mobile-first-text">This layout starts as a clean mobile pricing flow, then expands on larger screens without losing readability.</p>

          <div class="mobile-first-toggle-note">
            <strong>Annual billing</strong>
            <span>Save 20%</span>
          </div>

          <div class="mobile-first-bottom">
            <strong>No horizontal scrolling</strong>
            <span>Each plan is readable as a stacked mobile card with touch-friendly buttons.</span>
          </div>
        </div>

        <div class="mobile-first-plans">

          <article class="mobile-first-plan">
            <div class="mobile-first-plan-summary">
              <div>
                <h3>Starter</h3>
                <p>For small websites and first landing pages.</p>
              </div>
              <div class="mobile-first-price">
                <strong>$15</strong>
                <span>/mo</span>
              </div>
            </div>

            <div class="mobile-first-feature-rows">
              <div class="mobile-first-feature-row">
                <span>Projects</span>
                <strong>3</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Support</span>
                <strong>Email</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Best for</span>
                <strong>Small sites</strong>
              </div>
            </div>

            <a class="mobile-first-button" href="#">Choose Starter</a>
          </article>

          <article class="mobile-first-plan is-featured">
            <div class="mobile-first-plan-summary">
              <div>
                <h3>Growth</h3>
                <p>For growing sites that need stronger pricing and CTA sections.</p>
              </div>
              <div class="mobile-first-price">
                <strong>$49</strong>
                <span>/mo</span>
              </div>
            </div>

            <div class="mobile-first-feature-rows">
              <div class="mobile-first-feature-row">
                <span>Projects</span>
                <strong>20</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Support</span>
                <strong>Priority</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Best for</span>
                <strong>SaaS pages</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>CTA blocks</span>
                <strong>Included</strong>
              </div>
            </div>

            <a class="mobile-first-button" href="#">Choose Growth</a>
          </article>

          <article class="mobile-first-plan">
            <div class="mobile-first-plan-summary">
              <div>
                <h3>Scale</h3>
                <p>For teams that need custom pricing sections.</p>
              </div>
              <div class="mobile-first-price">
                <strong>$129</strong>
                <span>/mo</span>
              </div>
            </div>

            <div class="mobile-first-feature-rows">
              <div class="mobile-first-feature-row">
                <span>Projects</span>
                <strong>Unlimited</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Support</span>
                <strong>Dedicated</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Best for</span>
                <strong>Teams</strong>
              </div>
            </div>

            <a class="mobile-first-button" href="#">Contact Sales</a>
          </article>

        </div>

      </div>

    </div>
  </div>

</section>

CSS

.mobile-first-pricing{
width:min(100%,980px);
}

.mobile-first-shell{
max-width:430px;
margin:0 auto;
padding:14px;
border-radius:34px;
background:#111827;
box-shadow:0 34px 90px rgba(17,24,39,.24);
}

.mobile-first-screen{
padding:18px;
border-radius:26px;
background:#ffffff;
}

.mobile-first-header{
margin-bottom:18px;
}

.mobile-first-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:7px 10px;
border-radius:999px;
background:#ede9fe;
color:#6d28d9;
font-size:12px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.mobile-first-title{
margin:0 0 8px;
color:#111827;
font-size:32px;
line-height:1.05;
font-weight:950;
letter-spacing:-.055em;
}

.mobile-first-title span{
background:linear-gradient(135deg,#4f46e5,#ec4899);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.mobile-first-text{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.mobile-first-toggle-note{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:16px 0;
padding:12px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.mobile-first-toggle-note strong{
color:#111827;
font-size:13px;
font-weight:950;
}

.mobile-first-toggle-note span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 8px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:11px;
font-weight:950;
white-space:nowrap;
}

.mobile-first-plans{
display:grid;
gap:12px;
}

.mobile-first-plan{
padding:16px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.07);
}

.mobile-first-plan.is-featured{
background:linear-gradient(135deg,#eef2ff,#fdf2f8);
border-color:rgba(79,70,229,.36);
box-shadow:0 18px 46px rgba(79,70,229,.12);
}

.mobile-first-plan-summary{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:12px;
align-items:start;
margin-bottom:14px;
}

.mobile-first-plan h3{
margin:0 0 5px;
color:#111827;
font-size:21px;
line-height:1.15;
font-weight:950;
}

.mobile-first-plan p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:650;
}

.mobile-first-price{
text-align:right;
color:#111827;
}

.mobile-first-price strong{
display:block;
font-size:32px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.mobile-first-price span{
display:block;
margin-top:3px;
color:#64748b;
font-size:11px;
font-weight:850;
}

.mobile-first-feature-rows{
display:grid;
gap:8px;
margin-bottom:14px;
}

.mobile-first-feature-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px;
border-radius:15px;
background:#ffffff;
border:1px solid rgba(15,23,42,.05);
}

.mobile-first-feature-row span{
color:#64748b;
font-size:12px;
font-weight:850;
}

.mobile-first-feature-row strong{
color:#111827;
font-size:12px;
font-weight:950;
text-align:right;
}

.mobile-first-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
border-radius:999px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.mobile-first-button:hover{
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(79,70,229,.22);
}

.mobile-first-plan.is-featured .mobile-first-button{
background:linear-gradient(135deg,#4f46e5,#ec4899);
}

.mobile-first-bottom{
display:grid;
gap:8px;
margin-top:14px;
padding:14px;
border-radius:20px;
background:#111827;
color:#ffffff;
}

.mobile-first-bottom strong{
font-size:14px;
font-weight:950;
}

.mobile-first-bottom span{
color:#cbd5e1;
font-size:12px;
line-height:1.45;
font-weight:700;
}

@media (min-width:820px){
.mobile-first-shell{
max-width:980px;
padding:18px;
}

.mobile-first-screen{
padding:24px;
}

.mobile-first-layout{
display:grid;
grid-template-columns:320px minmax(0,1fr);
gap:22px;
align-items:start;
}

.mobile-first-header{
position:sticky;
top:0;
margin-bottom:0;
padding:22px;
border-radius:26px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.mobile-first-title{
font-size:46px;
}

.mobile-first-plans{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.mobile-first-plan.is-featured{
grid-row:span 2;
}
}

@media (max-width:640px){
.mobile-first-shell{
width:100%;
border-radius:28px;
}

.mobile-first-screen{
padding:14px;
border-radius:22px;
}

.mobile-first-title{
font-size:30px;
}

.mobile-first-plan-summary{
grid-template-columns:1fr;
}

.mobile-first-price{
text-align:left;
}

.mobile-first-toggle-note{
flex-direction:column;
align-items:flex-start;
}
}

This mobile-first pricing table is useful when most visitors view the website on phones. The stacked structure avoids cramped desktop-style columns and makes every plan, price, feature row, and CTA button easy to tap.

29. Accessible Pricing Table

Accessible pricing tables are designed so users can understand, compare, and choose plans with a keyboard, screen reader, or touch device. A good accessible pricing section uses semantic HTML, readable contrast, clear button labels, visible focus states, and simple plan structures.

This example uses semantic cards, descriptive headings, accessible button labels, strong contrast, and visible keyboard focus styles. It avoids hiding important pricing details behind color alone, which makes the table easier to use for more visitors.

• Uses semantic pricing cards with clear headings and readable hierarchy
• Includes visible focus states for keyboard navigation
• Uses descriptive aria-label text on pricing CTA buttons
• Avoids relying only on color to show the recommended plan
• Responsive layout keeps the accessible pricing cards readable on mobile

HTML

<section class="accessible-pricing" aria-labelledby="accessible-pricing-title">

  <div class="accessible-pricing-header">
    <div class="accessible-pricing-kicker">Accessible Pricing</div>
    <h3 class="accessible-pricing-title" id="accessible-pricing-title">Choose a plan with <span>clear accessible pricing</span></h3>
    <p class="accessible-pricing-text">This pricing table uses readable contrast, semantic card structure, descriptive buttons, and strong keyboard focus states.</p>
  </div>

  <div class="accessible-pricing-grid">

    <article class="accessible-plan" aria-labelledby="accessible-basic-title">
      <div class="accessible-plan-top">
        <div>
          <h3 id="accessible-basic-title">Basic</h3>
          <p class="accessible-plan-desc">For simple websites that need a clean pricing section and readable plan details.</p>
        </div>
        <span class="accessible-plan-label">Start</span>
      </div>

      <div class="accessible-price">
        <strong>$19</strong>
        <span>/month</span>
      </div>
      <p class="accessible-price-note">Best for personal websites and small landing pages.</p>

      <ul class="accessible-feature-list">
        <li>Responsive pricing cards</li>
        <li>Basic support by email</li>
        <li>Readable feature list</li>
      </ul>

      <a class="accessible-plan-button" href="#" aria-label="Choose the Basic pricing plan for 19 dollars per month">Choose Basic</a>
    </article>

    <article class="accessible-plan is-recommended" aria-labelledby="accessible-growth-title">
      <div class="accessible-plan-top">
        <div>
          <h3 id="accessible-growth-title">Growth</h3>
          <p class="accessible-plan-desc">For growing websites that need stronger conversion sections and priority support.</p>
        </div>
        <span class="accessible-plan-label">Recommended</span>
      </div>

      <div class="accessible-price">
        <strong>$59</strong>
        <span>/month</span>
      </div>
      <p class="accessible-price-note">Best for SaaS, service, and conversion-focused websites.</p>

      <ul class="accessible-feature-list">
        <li>Advanced pricing layouts</li>
        <li>Priority support access</li>
        <li>Conversion-focused CTA sections</li>
      </ul>

      <a class="accessible-plan-button" href="#" aria-label="Choose the recommended Growth pricing plan for 59 dollars per month">Choose Growth</a>
    </article>

    <article class="accessible-plan" aria-labelledby="accessible-scale-title">
      <div class="accessible-plan-top">
        <div>
          <h3 id="accessible-scale-title">Scale</h3>
          <p class="accessible-plan-desc">For teams that need custom pricing systems, advanced sections, and dedicated help.</p>
        </div>
        <span class="accessible-plan-label">Team</span>
      </div>

      <div class="accessible-price">
        <strong>$129</strong>
        <span>/month</span>
      </div>
      <p class="accessible-price-note">Best for larger websites, teams, and custom UI systems.</p>

      <ul class="accessible-feature-list">
        <li>Custom pricing section system</li>
        <li>Dedicated implementation support</li>
        <li>Advanced responsive components</li>
      </ul>

      <a class="accessible-plan-button" href="#" aria-label="Contact sales about the Scale pricing plan">Contact Sales</a>
    </article>

  </div>

  <p class="accessible-note">Tip: accessible pricing tables should not rely only on color. Use text labels, clear headings, visible focus states, and descriptive button labels so more users can understand the plan differences.</p>

</section>

CSS

.accessible-pricing{
width:min(100%,1080px);
}

.accessible-pricing-header{
max-width:760px;
margin:0 auto 30px;
text-align:center;
}

.accessible-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.accessible-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.accessible-pricing-title span{
background:linear-gradient(135deg,#2563eb,#0f172a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.accessible-pricing-text{
max-width:660px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
}

.accessible-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.accessible-plan{
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:2px solid rgba(15,23,42,.12);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.accessible-plan.is-recommended{
border-color:#2563eb;
box-shadow:0 30px 80px rgba(37,99,235,.15);
}

.accessible-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}

.accessible-plan h3{
margin:0 0 8px;
color:#0f172a;
font-size:25px;
line-height:1.15;
font-weight:950;
}

.accessible-plan-desc{
min-height:72px;
margin:0 0 20px;
color:#475569;
font-size:14px;
line-height:1.6;
}

.accessible-plan-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f1f5f9;
color:#334155;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
white-space:nowrap;
}

.accessible-plan.is-recommended .accessible-plan-label{
background:#2563eb;
color:#ffffff;
}

.accessible-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:10px;
color:#0f172a;
}

.accessible-price strong{
font-size:50px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.accessible-price span{
padding-bottom:5px;
color:#475569;
font-size:14px;
font-weight:850;
}

.accessible-price-note{
margin:0 0 22px;
color:#475569;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.accessible-feature-list{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.accessible-feature-list li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#1e293b;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.accessible-feature-list li::before{
content:"Included";
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
min-width:58px;
height:22px;
padding:0 8px;
border-radius:999px;
background:#dcfce7;
color:#166534;
font-size:10px;
font-weight:950;
letter-spacing:.03em;
text-transform:uppercase;
}

.accessible-plan-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
border:3px solid transparent;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.accessible-plan-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.accessible-plan-button:focus,
.accessible-plan-button:focus-visible{
outline:4px solid #facc15;
outline-offset:4px;
border-color:#0f172a;
}

.accessible-plan.is-recommended .accessible-plan-button{
background:#2563eb;
}

.accessible-note{
max-width:760px;
margin:24px auto 0;
padding:16px 18px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:700;
text-align:center;
box-shadow:0 14px 36px rgba(15,23,42,.07);
}

@media (max-width:960px){
.accessible-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.accessible-plan-desc{
min-height:auto;
}
}

@media (max-width:640px){
.accessible-pricing-header{
text-align:left;
}

.accessible-pricing-title{
font-size:34px;
}

.accessible-plan{
padding:20px;
border-radius:24px;
}

.accessible-plan-top{
flex-direction:column;
align-items:flex-start;
}

.accessible-price strong{
font-size:42px;
}

.accessible-feature-list li{
flex-direction:column;
gap:6px;
}

.accessible-note{
text-align:left;
}
}

This accessible pricing table is useful when usability matters as much as appearance. The structure gives users clear headings, readable contrast, text-based recommendation labels, visible keyboard focus styles, and descriptive CTA labels.

30. Complete Responsive Pricing Section

A complete responsive pricing section combines the most important pricing UI elements into one polished layout. It should explain the offer, compare plans, support the recommended choice, answer hesitation points, and work smoothly across desktop, tablet, and mobile screens.

This final example includes a pricing header, billing toggle, three responsive pricing cards, trust notes, plan details, and a mobile-friendly layout. It is designed as a complete pricing section that can be adapted for SaaS websites, service businesses, digital products, memberships, and landing pages.

• Complete responsive pricing section with header, toggle, plans, and trust notes
• Includes JavaScript for monthly and yearly price switching
• Highlights the recommended plan without hiding the other options
• Works for SaaS, services, digital products, memberships, and landing pages
• Responsive layout stacks cleanly on mobile and keeps CTA buttons easy to tap

HTML

<section class="complete-pricing" data-billing="monthly">

  <div class="complete-pricing-header">
    <div>
      <div class="complete-pricing-kicker">Complete Pricing Section</div>
      <h3 class="complete-pricing-title">A full responsive <span>pricing section</span> for modern websites</h3>
      <p class="complete-pricing-text">This complete pricing section includes billing toggle, plan cards, feature details, trust notes, clear CTA buttons, and responsive behavior.</p>
    </div>

    <div class="complete-pricing-control">
      <span class="complete-pricing-control-label">Billing period</span>
      <div class="complete-pricing-switch" role="group" aria-label="Choose billing period">
        <button class="complete-pricing-monthly" type="button">Monthly</button>
        <button class="complete-pricing-yearly" type="button">Yearly</button>
      </div>
      <span class="complete-pricing-save">Yearly billing shows discounted monthly equivalent pricing.</span>
    </div>
  </div>

  <div class="complete-pricing-grid">

    <article class="complete-pricing-card">
      <div class="complete-pricing-card-top">
        <div>
          <h3>Starter</h3>
          <p class="complete-pricing-card-desc">For simple projects, personal sites, and early landing pages.</p>
        </div>
        <span class="complete-pricing-badge">Start</span>
      </div>

      <div class="complete-price">
        <strong data-monthly="19" data-yearly="15">$19</strong>
        <span data-period>/mo</span>
      </div>
      <p class="complete-price-note" data-note></p>

      <div class="complete-pricing-details">
        <div class="complete-pricing-detail">
          <strong>3</strong>
          <span>Projects</span>
        </div>
        <div class="complete-pricing-detail">
          <strong>Email</strong>
          <span>Support</span>
        </div>
      </div>

      <ul class="complete-pricing-features">
        <li>Responsive pricing cards</li>
        <li>Basic CTA sections</li>
        <li>Simple plan comparison</li>
      </ul>

      <a class="complete-pricing-button" href="#">Choose Starter</a>
    </article>

    <article class="complete-pricing-card is-featured">
      <div class="complete-pricing-card-top">
        <div>
          <h3>Growth</h3>
          <p class="complete-pricing-card-desc">For growing websites that need better conversion sections and stronger pricing UI.</p>
        </div>
        <span class="complete-pricing-badge">Recommended</span>
      </div>

      <div class="complete-price">
        <strong data-monthly="59" data-yearly="47">$59</strong>
        <span data-period>/mo</span>
      </div>
      <p class="complete-price-note" data-note></p>

      <div class="complete-pricing-details">
        <div class="complete-pricing-detail">
          <strong>20</strong>
          <span>Projects</span>
        </div>
        <div class="complete-pricing-detail">
          <strong>Priority</strong>
          <span>Support</span>
        </div>
      </div>

      <ul class="complete-pricing-features">
        <li>Advanced pricing layouts</li>
        <li>Conversion-focused CTA blocks</li>
        <li>Trust and comparison elements</li>
      </ul>

      <a class="complete-pricing-button" href="#">Choose Growth</a>
    </article>

    <article class="complete-pricing-card">
      <div class="complete-pricing-card-top">
        <div>
          <h3>Scale</h3>
          <p class="complete-pricing-card-desc">For teams that need custom pricing sections, systems, and support.</p>
        </div>
        <span class="complete-pricing-badge">Team</span>
      </div>

      <div class="complete-price">
        <strong data-monthly="129" data-yearly="103">$129</strong>
        <span data-period>/mo</span>
      </div>
      <p class="complete-price-note" data-note></p>

      <div class="complete-pricing-details">
        <div class="complete-pricing-detail">
          <strong>∞</strong>
          <span>Projects</span>
        </div>
        <div class="complete-pricing-detail">
          <strong>Dedicated</strong>
          <span>Support</span>
        </div>
      </div>

      <ul class="complete-pricing-features">
        <li>Custom pricing section system</li>
        <li>Team-ready responsive UI</li>
        <li>Dedicated implementation support</li>
      </ul>

      <a class="complete-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="complete-pricing-trust">
    <span>No setup fees</span>
    <span>Cancel anytime</span>
    <span>Secure checkout</span>
    <span>Responsive CSS</span>
  </div>

</section>

CSS

.complete-pricing{
width:min(100%,1160px);
}

.complete-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.complete-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#bfdbfe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.complete-pricing-title{
max-width:760px;
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,64px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
}

.complete-pricing-title span{
background:linear-gradient(90deg,#60a5fa,#22d3ee,#c084fc);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.complete-pricing-text{
max-width:660px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.complete-pricing-control{
padding:18px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.complete-pricing-control-label{
display:block;
margin-bottom:12px;
color:#e5e7eb;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.complete-pricing-switch{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
padding:6px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
}

.complete-pricing-switch::before{
content:"";
position:absolute;
top:6px;
left:6px;
width:calc(50% - 6px);
height:calc(100% - 12px);
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#06b6d4);
transition:transform .24s ease;
}

.complete-pricing.is-yearly .complete-pricing-switch::before{
transform:translateX(100%);
}

.complete-pricing-switch button{
position:relative;
z-index:2;
min-height:42px;
border:0;
background:transparent;
cursor:pointer;
border-radius:999px;
color:#cbd5e1;
font-size:13px;
font-weight:950;
}

.complete-pricing:not(.is-yearly) .complete-pricing-monthly,
.complete-pricing.is-yearly .complete-pricing-yearly{
color:#ffffff;
}

.complete-pricing-save{
display:block;
margin-top:12px;
color:#86efac;
font-size:12px;
font-weight:850;
line-height:1.45;
}

.complete-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
align-items:stretch;
}

.complete-pricing-card{
display:flex;
flex-direction:column;
padding:22px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.complete-pricing-card.is-featured{
background:linear-gradient(180deg,#ffffff,#eff6ff);
border-color:rgba(96,165,250,.60);
box-shadow:0 34px 100px rgba(37,99,235,.24);
transform:translateY(-12px);
}

.complete-pricing-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.complete-pricing-card h3{
margin:0 0 8px;
color:#0f172a;
font-size:25px;
line-height:1.15;
font-weight:950;
}

.complete-pricing-card-desc{
min-height:72px;
margin:0 0 20px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.complete-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
white-space:nowrap;
}

.complete-pricing-card.is-featured .complete-pricing-badge{
background:#0f172a;
color:#ffffff;
}

.complete-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:8px;
color:#0f172a;
}

.complete-price strong{
font-size:52px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.complete-price span{
padding-bottom:6px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.complete-price-note{
min-height:20px;
margin:0 0 22px;
color:#15803d;
font-size:13px;
line-height:1.45;
font-weight:850;
}

.complete-pricing-details{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.complete-pricing-detail{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.complete-pricing-detail strong{
display:block;
margin-bottom:4px;
color:#0f172a;
font-size:14px;
font-weight:950;
}

.complete-pricing-detail span{
display:block;
color:#64748b;
font-size:11px;
line-height:1.35;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.complete-pricing-features{
display:grid;
gap:11px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.complete-pricing-features li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.complete-pricing-features li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:19px;
height:19px;
border-radius:999px;
background:#dbeafe;
color:#2563eb;
font-size:11px;
font-weight:950;
}

.complete-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.complete-pricing-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.complete-pricing-card.is-featured .complete-pricing-button{
background:linear-gradient(135deg,#2563eb,#06b6d4);
}

.complete-pricing-trust{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-top:18px;
}

.complete-pricing-trust span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:850;
text-align:center;
}

@media (max-width:1020px){
.complete-pricing-header{
grid-template-columns:1fr;
}

.complete-pricing-grid{
grid-template-columns:1fr;
max-width:580px;
margin:0 auto;
}

.complete-pricing-card.is-featured{
transform:none;
}

.complete-pricing-trust{
grid-template-columns:repeat(2,minmax(0,1fr));
max-width:580px;
margin-left:auto;
margin-right:auto;
}
}

@media (max-width:640px){
.complete-pricing-title{
font-size:38px;
}

.complete-pricing-card{
padding:20px;
border-radius:26px;
}

.complete-pricing-card-top{
flex-direction:column;
align-items:flex-start;
}

.complete-pricing-card-desc{
min-height:auto;
}

.complete-pricing-details{
grid-template-columns:1fr;
}

.complete-pricing-trust{
grid-template-columns:1fr;
}

.complete-price strong{
font-size:42px;
}
}

JavaScript

document.querySelectorAll(".complete-pricing").forEach(function(section){
const monthlyButton=section.querySelector(".complete-pricing-monthly");
const yearlyButton=section.querySelector(".complete-pricing-yearly");
const priceItems=section.querySelectorAll("[data-monthly]");
const periods=section.querySelectorAll("[data-period]");
const notes=section.querySelectorAll("[data-note]");

function setBilling(type){
const isYearly=type==="yearly";
section.classList.toggle("is-yearly",isYearly);
section.setAttribute("data-billing",type);

priceItems.forEach(function(price){
const value=isYearly ? price.getAttribute("data-yearly") : price.getAttribute("data-monthly");
price.textContent="$"+value;
});

periods.forEach(function(period){
period.textContent=isYearly ? "/mo billed yearly" : "/mo";
});

notes.forEach(function(note){
note.textContent=isYearly ? "Annual discount applied." : "";
});
}

monthlyButton.addEventListener("click",function(){
setBilling("monthly");
});

yearlyButton.addEventListener("click",function(){
setBilling("yearly");
});
});

This complete responsive pricing section is useful as a final polished pricing block for a modern website. It combines a billing toggle, plan hierarchy, responsive pricing cards, feature details, trust notes, and strong CTA buttons in one complete layout.

CSS Pricing Table Best Practices

A modern CSS pricing table should do more than look attractive. It should help users understand the difference between plans, compare value quickly, and choose the next step with confidence. Whether you are building a simple HTML CSS pricing table, a SaaS pricing table, a responsive pricing card grid, or a complete pricing section for a landing page, the same core rules apply.

The best pricing sections are clear, focused, and conversion-friendly. They avoid visual clutter, explain who each plan is for, and make the recommended option easy to notice without making the other options feel hidden or unimportant.

If you want your pricing section to feel more polished, combine these pricing table best practices with strong supporting UI. For example, you can pair a pricing table with a strong hero section, a testimonial block, a FAQ accordion, or a comparison section. You can also improve the visual hierarchy with reusable patterns from our guides to modern CSS cards, modern CSS buttons, and modern CSS layouts.

Responsive Pricing Table Tips

A responsive pricing table must remain easy to compare on desktop, tablet, and mobile screens. This is especially important for SaaS pricing pages, hosting plans, app landing pages, service packages, and ecommerce pricing sections where users may compare options before making a purchase decision.

For most modern websites, pricing cards are easier to make responsive than large traditional tables. A three-column desktop grid can become a single-column mobile layout, while a detailed comparison table may need horizontal scrolling or a simplified mobile version.

When your pricing section is part of a full landing page, it should also connect visually with the surrounding sections. For example, a pricing table after a modern website hero section should feel like part of the same page, not a random pasted component. The same applies to forms, navigation, FAQs, and tabs that appear around the pricing area.

Common Pricing Table Design Mistakes

Even a beautiful pricing table can fail if the structure is confusing. Many pricing sections look modern at first glance but create friction because the plan differences are unclear, the CTA buttons are weak, or the mobile layout is hard to read.

Here are the most common pricing table mistakes to avoid when building HTML and CSS pricing tables for modern websites.

A good pricing section should remove doubt, not create it. When users can quickly see who each plan is for, what it costs, what is included, and what button to click next, your pricing table becomes a stronger conversion element.

CSS Pricing Tables FAQ

Below are common questions about modern CSS pricing tables, responsive pricing cards, SaaS pricing sections, and HTML CSS pricing table design.

Conclusion

Modern CSS pricing tables are an important part of high-converting website design. A strong pricing section can help users compare plans, understand the value of each option, and choose the right package without confusion.

In this guide, you saw 30 modern CSS pricing table examples, including basic HTML CSS pricing tables, responsive pricing cards, SaaS pricing tables, featured plan layouts, dark mode pricing sections, gradient pricing cards, glassmorphism pricing tables, pricing comparison tables, mobile-first pricing layouts, accessible pricing tables, and a complete responsive pricing section with a billing toggle.

Use these examples as starting points for your own website projects. You can customize the colors, plan names, prices, feature lists, badges, CTA buttons, and responsive behavior to match your brand, product, service, or landing page. The most important goal is always the same: make the pricing decision clear, trustworthy, and easy to act on.