Tier comparison pricing panel

A tier comparison pricing panel built with pure HTML and CSS that presents multiple subscription levels in a structured comparison layout. It highlights feature distribution across plans to help users evaluate differences efficiently.

Usage

Use this component when users need side-by-side plan evaluation, such as SaaS subscriptions, membership levels, enterprise offerings, or service bundles requiring transparent feature comparison.

Implementation

The layout is structured using column based alignment, consistent feature rows, and visual indicators to show availability across tiers. CSS manages spacing, borders, and responsive stacking behavior to preserve readability on smaller screens.

HTML

<section class="pricing-compare">
  <div class="pricing-compare__tier is-primary">
    <span class="pricing-compare__name">Pro</span>
    <span class="pricing-compare__price">$29</span>
  </div>
  <div class="pricing-compare__tier">
    <span class="pricing-compare__name">Basic</span>
    <span class="pricing-compare__price">$12</span>
  </div>
</section>

<section class="pricing-compare">
  <div class="pricing-compare__tier is-primary">
    <span class="pricing-compare__name">Pro</span>
    <span class="pricing-compare__price">$29</span>
  </div>
  <div class="pricing-compare__tier">
    <span class="pricing-compare__name">Basic</span>
    <span class="pricing-compare__price">$12</span>
  </div>
</section>

CSS

.pricing-compare {
  width: 200px;
  padding: 0.75rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  box-shadow: 0 18px 36px rgba(0,0,0,0.12);
  display: grid;
  gap: 0.5rem;
}

.pricing-compare__tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 12px;
  background: rgba(0,0,0,0.08);
}

.pricing-compare__tier.is-primary {
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  color: #ffffff;
  font-weight: 600;
}

.pricing-compare__price {
  font-size: 14px;
}

@media (prefers-color-scheme: dark) {
  .pricing-compare {
    background: linear-gradient(180deg, #111827, #1f2937);
  }

  .pricing-compare__tier {
    background: rgba(255,255,255,0.06);
  }
}

.pricing-compare {
  width: 200px;
  padding: 0.75rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  box-shadow: 0 18px 36px rgba(0,0,0,0.12);
  display: grid;
  gap: 0.5rem;
}

.pricing-compare__tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 12px;
  background: rgba(0,0,0,0.08);
}

.pricing-compare__tier.is-primary {
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  color: #ffffff;
  font-weight: 600;
}

.pricing-compare__price {
  font-size: 14px;
}

@media (prefers-color-scheme: dark) {
  .pricing-compare {
    background: linear-gradient(180deg, #111827, #1f2937);
  }

  .pricing-compare__tier {
    background: rgba(255,255,255,0.06);
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Enables clear multi tier feature comparison
• Maintains structured alignment consistency
• Fully responsive layout behavior
• Ideal for SaaS and subscription pricing pages
• Supports expandable feature lists if needed

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.