Pricing Table Generator

<div class="pricing">
  <article class="price-card">
    
    <h3>Starter</h3>
    <p class="price"><span class="amount">$0</span><span class="period">/mo</span></p>
    <ul>
      <li>1 project</li>
      <li>Community support</li>
    </ul>
    <button type="button">Choose Starter</button>
  </article>
  <article class="price-card featured">
    <span class="badge">Popular</span>
    <h3>Pro</h3>
    <p class="price"><span class="amount">$19</span><span class="period">/mo</span></p>
    <ul>
      <li>Unlimited projects</li>
      <li>Priority support</li>
      <li>Custom domains</li>
    </ul>
    <button type="button">Choose Pro</button>
  </article>
  <article class="price-card">
    
    <h3>Team</h3>
    <p class="price"><span class="amount">$49</span><span class="period">/mo</span></p>
    <ul>
      <li>Everything in Pro</li>
      <li>Team roles</li>
      <li>SSO</li>
    </ul>
    <button type="button">Choose Team</button>
  </article>
</div>
<style>
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:900px;margin:0 auto;}
.price-card{position:relative;display:flex;flex-direction:column;border:1px solid #e2e8f0;border-radius:16px;padding:24px;background:#fff;}
.price-card.featured{border-color:#6366f1;box-shadow:0 12px 30px -12px #6366f180;}
.badge{position:absolute;top:-12px;left:24px;background:#6366f1;color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;}
.price-card h3{margin:0 0 8px;font-size:18px;color:#0f172a;}
.price{margin:0 0 16px;}
.amount{font-size:34px;font-weight:700;color:#0f172a;}
.period{color:#64748b;font-size:14px;}
.price-card ul{list-style:none;margin:0 0 20px;padding:0;flex:1;display:flex;flex-direction:column;gap:8px;}
.price-card li{position:relative;padding-left:22px;font-size:14px;color:#334155;}
.price-card li::before{content:"✓";position:absolute;left:0;color:#6366f1;font-weight:700;}
.price-card button{border:0;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer;background:#f1f5f9;color:#0f172a;}
.price-card.featured button{background:#6366f1;color:#fff;}
</style>