Pricing Cards

index.html Copy

<section class="pricing"><header><span>Preise</span><h2>Einfach und transparent</h2><p>Dieses Starter-Beispiel zeigt nur das UI-Muster.</p></header><div class="plans"><article><b>Free</b><strong>0 €</strong><p>Basisumfang</p><button>Starten</button></article><article class="featured"><b>Team</b><strong>19 €</strong><p>Zusammenarbeit</p><button>Auswählen</button></article><article><b>Company</b><strong>49 €</strong><p>Organisationen</p><button>Kontakt</button></article></div></section><style>.pricing{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-width:1120px;margin:auto;padding:64px 24px}.pricing header{text-align:center;max-width:680px;margin:auto auto 30px}.pricing h2{font-size:2.5rem;margin:.25em}.pricing header span{color:#6d28d9;font-weight:800}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.plans article{display:grid;gap:14px;padding:26px;border:1px solid #e4e4e7;border-radius:16px}.plans article strong{font-size:2.2rem}.featured{border:2px solid #6d28d9!important}button{padding:11px 14px;border:0;background:#18181b;color:white;border-radius:8px}@media(max-width:760px){.plans{grid-template-columns:1fr}}</style>