SaaS Pricing Upgrade Plan Form

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="planform-card" onsubmit="return false;"><h3>Get New customers faster</h3><p>Grow your customer base with our tools. Go PRO now!</p><div class="planform-switch"><button type="button" class="active">Monthly</button><button type="button">Annual</button></div><div class="planform-features"><h6>What we offer</h6><ul><li>✓ Grow your customer base</li><li>✓ Use E-mail automations</li></ul></div><div class="planform-footer"><div class="planform-price"><b>$9</b><span>/mo</span></div><button type="submit">Upgrade to PRO</button></div></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.planform-card { width: 240px; background: #ffffff; border-radius: 16px; padding: 16px; box-shadow: 0 15px 30px rgba(0,0,0,0.05); font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.planform-card h3 { margin: 0; font-size: 11px; font-weight: 800; color: #0f172a; text-align: center; }
.planform-card p { margin: 4px 0 10px; font-size: 7px; color: #64748b; text-align: center; line-height: 1.3; }
.planform-switch { display: flex; background: #f1f5f9; padding: 2px; border-radius: 8px; margin-bottom: 12px; }
.planform-switch button { flex: 1; border: none; background: transparent; padding: 5px; font-size: 8px; font-weight: 700; color: #64748b; border-radius: 6px; cursor: pointer; }
.planform-switch button.active { background: #ffffff; color: #0f172a; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.planform-features h6 { margin: 0 0 4px; font-size: 8px; font-weight: 800; color: #0f172a; }
.planform-features ul { list-style: none; padding: 0; margin: 0 0 12px; }
.planform-features li { font-size: 7px; color: #475569; font-weight: 600; margin-bottom: 3px; }
.planform-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f1f5f9; padding-top: 10px; }
.planform-price b { font-size: 14px; color: #0f172a; }
.planform-price span { font-size: 7px; color: #94a3b8; }
.planform-footer button { background: #16a34a; color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-size: 8px; font-weight: 800; cursor: pointer; }