The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<section class="pricing">
  <h2>Simple, honest pricing</h2>
  <p class="sub">Start free. Upgrade when you are ready.</p>
  <div class="plans">
    <article class="plan">
      <h3>Starter</h3>
      <p class="price">&#8377;0<span>/month</span></p>
      <ul><li>1 project</li><li>Community support</li><li>Basic analytics</li></ul>
      <a class="btn" href="#">Get started</a>
    </article>
    <article class="plan popular">
      <span class="badge">Most popular</span>
      <h3>Pro</h3>
      <p class="price">&#8377;999<span>/month</span></p>
      <ul><li>Unlimited projects</li><li>Priority support</li><li>Advanced analytics</li><li>Custom domain</li></ul>
      <a class="btn" href="#">Start free trial</a>
    </article>
    <article class="plan">
      <h3>Team</h3>
      <p class="price">&#8377;2,499<span>/month</span></p>
      <ul><li>Everything in Pro</li><li>10 team members</li><li>SSO and audit logs</li></ul>
      <a class="btn" href="#">Contact sales</a>
    </article>
  </div>
</section>

The AI prompt

Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.

Build a responsive three-tier pricing section in plain HTML and CSS.

Content:
- Centred heading "Simple, honest pricing" and subtitle "Start free. Upgrade when you are ready."
- Three plans in Indian rupees: Starter (₹0/month), Pro (₹999/month, highlighted as "Most popular") and Team (₹2,499/month). Each has a short feature list and a full-width pill button.

Styling:
- White section, plans in a 3-column grid (max-width 1040px, 24px gap), vertically centred so the highlighted plan looks taller.
- Plan cards: 32px padding, 16px radius, 1px #e8e9f0 border. Price in 2.6rem extra-bold navy with a small grey "/month".
- Feature list items show a check mark using a ::before pseudo-element (content "\2713") in indigo.
- Outlined navy buttons that fill navy on hover.
- The Pro plan is navy (#002057) with white text, extra vertical padding, a large soft shadow, orange check marks, a white button that turns orange on hover, and an orange "Most popular" badge in the top-right corner.
- Single column (max 420px, centred) below 860px.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Place the three plans in a three-column grid and set align-items: center. Giving the popular plan more padding then makes it stand taller than its neighbours.

2. 2

   Build each plan from the same markup: name, price, feature list, button.

3. 3

   Add check marks with a ::before pseudo-element on each list item, so the HTML stays clean.

4. 4

   Create a .popular modifier class that changes the background, text colours and shadow.

5. 5

   Position the badge absolutely in the top-right of the card (the card needs position: relative).

6. 6

   Collapse to a single centred column on mobile.

Customisation tips

• Add a monthly/yearly toggle with a checkbox and the :has() selector, or a few lines of JavaScript.
• Keep feature lists to the 3-5 differences that matter; link to a full comparison table for the rest.
• State the currency and billing period next to every price to avoid confusion.

More sections