A three-tier dark pricing table with a highlighted recommended plan and hover lift effects.
★ 0 community votes · Safety scan passed · Sandboxed previewDark Pricing Table is an interface component generated on MorphCanvas, an infinite AI workspace that turns written intent into reviewable HTML, CSS, and JavaScript widgets. This component passed MorphCanvas’s automated safety scan, which checks for unsafe patterns such as external network calls, storage access, inline event handlers, and code execution, and it is rendered here inside a sandboxed preview frame.
A creator described the result they wanted, MorphCanvas routed the request through its AI provider chain with automatic failover, scanned the generated code, and published the reviewed component to the public library. You can build and publish your own components on the MorphCanvas canvas.
<div class="p-wrap"><div class="p-card"><h4>Starter</h4><p class="p-price">$0<span>/mo</span></p><ul><li>1 workspace</li><li>10 AI drafts / day</li><li>Community gallery</li></ul><button>Start free</button></div><div class="p-card p-hot"><em>Recommended</em><h4>Pro</h4><p class="p-price">$12<span>/mo</span></p><ul><li>Unlimited workspaces</li><li>100 AI drafts / day</li><li>Private embeds</li></ul><button>Go Pro</button></div><div class="p-card"><h4>Team</h4><p class="p-price">$39<span>/mo</span></p><ul><li>Shared libraries</li><li>Provider failover</li><li>Audit log access</li></ul><button>Contact us</button></div></div>.p-wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:28px;font-family:system-ui,sans-serif;background:#0b1118;border-radius:18px}.p-card{position:relative;flex:1;min-width:180px;max-width:230px;padding:24px 20px;border-radius:14px;background:#141d29;border:1px solid #233247;color:#dfe9f5;transition:transform .25s,border-color .25s}.p-card:hover{transform:translateY(-6px);border-color:#3fd9c7}.p-hot{border-color:#3fd9c7;box-shadow:0 14px 34px rgba(63,217,199,.18)}.p-hot em{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#3fd9c7;color:#06231f;font-style:normal;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px}.p-card h4{margin:4px 0 8px;font-size:16px}.p-price{margin:0 0 14px;font-size:30px;font-weight:800;color:#7ef0e4}.p-price span{font-size:13px;font-weight:400;opacity:.6}.p-card ul{margin:0 0 18px;padding:0;list-style:none;font-size:13px;line-height:2;opacity:.85}.p-card button{width:100%;padding:10px;border:0;border-radius:8px;background:#3fd9c7;color:#06231f;font-weight:700;cursor:pointer}.p-card button:hover{filter:brightness(1.1)}