Loading Component...

Loading

More Components

View All
Part of

Pick a Plan UI

Oops! Something went wrong while submitting the form.
Pick a Plan UI
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"3a1dfc5b-e1f6-fe02-4e82-9910083cca86","type":"Block","tag":"div","classes":["00700620-15bc-5d19-bf0e-8cce2a594a4d"],"children":["469593fe-e70c-950f-04be-194c4a1bcd08","5ecaf993-6b56-18a4-e5b1-4a85b7e103a3","c0744c5c-833d-1245-b18e-f3d69443bd90"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"469593fe-e70c-950f-04be-194c4a1bcd08","type":"Block","tag":"div","classes":["f101c609-2224-10de-1a0b-3691ca20da1b"],"children":["212b8bd6-929c-887a-3c2e-270d9131c743","e314420c-bf08-98f5-1f6f-76499ce09ff5"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"212b8bd6-929c-887a-3c2e-270d9131c743","type":"Heading","tag":"h2","classes":["a9d2486c-c256-8e75-7180-391f303373bf"],"children":["212b8bd6-929c-887a-3c2e-270d9131c744"],"data":{"tag":"h2","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"212b8bd6-929c-887a-3c2e-270d9131c744","text":true,"v":"Pick a Pro Plan"},{"_id":"e314420c-bf08-98f5-1f6f-76499ce09ff5","type":"Block","tag":"div","classes":["579e29bb-5563-c840-44db-9d63355acc29"],"children":["e314420c-bf08-98f5-1f6f-76499ce09ff6"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e314420c-bf08-98f5-1f6f-76499ce09ff6","text":true,"v":"Choose your preferred \"Pro Access\" plan below"},{"_id":"5ecaf993-6b56-18a4-e5b1-4a85b7e103a3","type":"Block","tag":"div","classes":["a4a15abd-6309-7ebe-0aa8-d2bb07f5f720"],"children":["03525fcf-0162-4a27-a82a-c89709899a01","03525fcf-0162-4a27-a82a-c89709899a06"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a01","type":"HtmlEmbed","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65db"],"children":[],"v":"<style>\n.price-box-tall.w--current .tab-radio-button {\n border: 6px solid #ffbb38;\n}\n.price-box-tall.w--current .price-icon {\ncolor: #ffbb38;\nbackground: #fff8eb;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<style>\n.price-box-tall.w--current .tab-radio-button {\n border: 6px solid #ffbb38;\n}\n.price-box-tall.w--current .price-icon {\ncolor: #ffbb38;\nbackground: #fff8eb;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a06","type":"TabsWrapper","tag":"div","classes":[],"children":["03525fcf-0162-4a27-a82a-c89709899a07","03525fcf-0162-4a27-a82a-c89709899a1e"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tabs":{"type":"wrapper","current":"Tab 2","easing":"ease","fadeIn":100,"fadeOut":100}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a07","type":"TabsMenu","tag":"div","classes":["058dbaf5-95ba-eb92-3958-ef5f1a932a52"],"children":["03525fcf-0162-4a27-a82a-c89709899a08","03525fcf-0162-4a27-a82a-c89709899a13"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"menu"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a08","type":"TabsLink","tag":"a","classes":["9c5c6b53-032f-9725-0238-612098848176"],"children":["32afd6f7-f788-ce01-02d0-b9445ebf1a81","03525fcf-0162-4a27-a82a-c89709899a09","03525fcf-0162-4a27-a82a-c89709899a0e","03525fcf-0162-4a27-a82a-c89709899a10","03525fcf-0162-4a27-a82a-c89709899a12"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Tab 1"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"32afd6f7-f788-ce01-02d0-b9445ebf1a81","type":"HtmlEmbed","tag":"div","classes":["d1673d22-acd1-08aa-7038-653e30f30e4a","10f4d79d-84b7-0e3d-a5b6-f8fa044e9732"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z\"/></svg>","data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":true},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a09","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d3"],"children":["03525fcf-0162-4a27-a82a-c89709899a0a"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a0a","type":"Block","tag":"div","classes":["c63bf99a-4356-684f-c4b1-c19de99cbb72"],"children":["03525fcf-0162-4a27-a82a-c89709899a0b"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a0b","text":true,"v":"MONTHLY"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a0e","type":"Block","tag":"div","classes":["98dd9f0f-cf08-b150-214c-3a117a77d6e1"],"children":["b8d98136-ee79-6ced-17b6-2b8193ae2796","03525fcf-0162-4a27-a82a-c89709899a0f","ae79c514-259d-f47e-e6db-1b1975d1f211"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b8d98136-ee79-6ced-17b6-2b8193ae2796","type":"Span","tag":"span","classes":["9970f322-3716-0e4e-7fde-8796690c614c"],"children":["81799243-a2d1-e4fb-a36d-36ee218719e3"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"81799243-a2d1-e4fb-a36d-36ee218719e3","text":true,"v":"$"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a0f","text":true,"v":"18"},{"_id":"ae79c514-259d-f47e-e6db-1b1975d1f211","type":"Span","tag":"span","classes":["9970f322-3716-0e4e-7fde-8796690c614c"],"children":["14edcc24-1e07-67d2-e2c4-af5919e5d36a"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"14edcc24-1e07-67d2-e2c4-af5919e5d36a","text":true,"v":"/month"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a10","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d8"],"children":["03525fcf-0162-4a27-a82a-c89709899a11"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a11","text":true,"v":"Cancel anytime. "},{"_id":"03525fcf-0162-4a27-a82a-c89709899a12","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d6"],"children":[],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false,"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a13","type":"TabsLink","tag":"a","classes":["9c5c6b53-032f-9725-0238-612098848176"],"children":["ad39fd69-6d80-ff58-1354-1bf98adf901b","03525fcf-0162-4a27-a82a-c89709899a14","03525fcf-0162-4a27-a82a-c89709899a19","03525fcf-0162-4a27-a82a-c89709899a1b","03525fcf-0162-4a27-a82a-c89709899a1d","fe6287c1-da5b-0139-28d8-a080bb15deaf"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Tab 2"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"ad39fd69-6d80-ff58-1354-1bf98adf901b","type":"HtmlEmbed","tag":"div","classes":["d1673d22-acd1-08aa-7038-653e30f30e4a"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><g><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/></g><g><path d=\"m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z\"/></g></svg>","data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":true},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><g><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/></g><g><path d=\"m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z\"/></g></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a14","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d3"],"children":["03525fcf-0162-4a27-a82a-c89709899a15"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a15","type":"Block","tag":"div","classes":["c63bf99a-4356-684f-c4b1-c19de99cbb72"],"children":["03525fcf-0162-4a27-a82a-c89709899a16"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a16","text":true,"v":"YEARLY"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a19","type":"Block","tag":"div","classes":["98dd9f0f-cf08-b150-214c-3a117a77d6e1"],"children":["bdc53db7-b3fe-a84e-e3a1-8de5837ad54d","03525fcf-0162-4a27-a82a-c89709899a1a","4ad3021f-5b43-5aa5-7bc6-662d1d97b125"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"bdc53db7-b3fe-a84e-e3a1-8de5837ad54d","type":"Span","tag":"span","classes":["9970f322-3716-0e4e-7fde-8796690c614c"],"children":["5b0c027b-89c7-a39c-f122-b913494ccd93"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5b0c027b-89c7-a39c-f122-b913494ccd93","text":true,"v":"$"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1a","text":true,"v":"169"},{"_id":"4ad3021f-5b43-5aa5-7bc6-662d1d97b125","type":"Span","tag":"span","classes":["9970f322-3716-0e4e-7fde-8796690c614c"],"children":["8925afaf-3f3a-efab-97c1-cb45c9ddba5e"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"8925afaf-3f3a-efab-97c1-cb45c9ddba5e","text":true,"v":"/year"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1b","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d8"],"children":["03525fcf-0162-4a27-a82a-c89709899a1c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1c","text":true,"v":"Save 20%!"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1d","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d6"],"children":[],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false,"tag":"div"}},{"_id":"fe6287c1-da5b-0139-28d8-a080bb15deaf","type":"Block","tag":"div","classes":["537b5ed7-afc3-c4f3-0acc-c1092f21d6a1"],"children":["bfa56661-cdad-d177-7892-289a8b98d868"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"bfa56661-cdad-d177-7892-289a8b98d868","text":true,"v":"Recommended"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1e","type":"TabsContent","tag":"div","classes":[],"children":["03525fcf-0162-4a27-a82a-c89709899a1f","03525fcf-0162-4a27-a82a-c89709899a22"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"content"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1f","type":"TabsPane","tag":"div","classes":[],"children":["03525fcf-0162-4a27-a82a-c89709899a20"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"","data-w-tab":"Tab 1"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a20","type":"Link","tag":"a","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65dc","965fa345-8bd2-b4c1-c17f-ed42afa00b7f"],"children":["03525fcf-0162-4a27-a82a-c89709899a21"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-price:update","value":"your_price_ID"}],"block":"","displayName":"","attr":{"id":"","href":"#"},"visibility":{"conditions":[]},"button":true,"link":{"url":"#","mode":"external"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a21","text":true,"v":"Checkout for $18/mo"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a22","type":"TabsPane","tag":"div","classes":[],"children":["03525fcf-0162-4a27-a82a-c89709899a23"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"","data-w-tab":"Tab 2"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a23","type":"Link","tag":"a","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65dc","965fa345-8bd2-b4c1-c17f-ed42afa00b7f"],"children":["03525fcf-0162-4a27-a82a-c89709899a24"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-price:update","value":"your_price_ID"}],"block":"","displayName":"","attr":{"id":"","href":"#"},"visibility":{"conditions":[]},"button":true,"link":{"url":"/signup","mode":"external"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a24","text":true,"v":"Checkout for $169/yr"},{"_id":"c0744c5c-833d-1245-b18e-f3d69443bd90","type":"Block","tag":"div","classes":["2ba286b5-8cd8-f6a5-7b1b-01ae82eb5b2f"],"children":["12e985af-019c-ce62-20ec-53c97b8fbc6c","775b7db6-fbf1-b259-3dd0-7ec1ca94265b"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"12e985af-019c-ce62-20ec-53c97b8fbc6c","type":"HtmlEmbed","tag":"div","classes":["41d70b1e-85e6-2641-48d8-2599be99d480"],"children":[],"v":"<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_1_22456)\">\n<path d=\"M8 10V7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n<path d=\"M5 10H19V19C19 20.1046 18.1046 21 17 21H7C5.89543 21 5 20.1046 5 19V10Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"/>\n<rect x=\"14.5\" y=\"15.5\" width=\"0.01\" height=\"0.01\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_1_22456\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_1_22456)\">\n<path d=\"M8 10V7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n<path d=\"M5 10H19V19C19 20.1046 18.1046 21 17 21H7C5.89543 21 5 20.1046 5 19V10Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"/>\n<rect x=\"14.5\" y=\"15.5\" width=\"0.01\" height=\"0.01\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_1_22456\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"775b7db6-fbf1-b259-3dd0-7ec1ca94265b","type":"Block","tag":"div","classes":[],"children":["775b7db6-fbf1-b259-3dd0-7ec1ca94265c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"775b7db6-fbf1-b259-3dd0-7ec1ca94265c","text":true,"v":"Secured by Stripe | AES-256 bit encryption"}],"styles":[{"_id":"965fa345-8bd2-b4c1-c17f-ed42afa00b7f","fake":false,"type":"class","name":"margin-top","namespace":"","comb":"&","styleLess":"margin-top: 2em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9c5c6b53-032f-9725-0238-612098848176","fake":false,"type":"class","name":"price-box-tall","namespace":"","comb":"","styleLess":"display: flex; width: 48%; margin-top: 0px; margin-bottom: 0px; padding-top: 2em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; flex-direction: column; justify-content: space-between; border-top-style: solid; border-top-width: 1px; border-top-color: rgba(0, 0, 0, 0.1); border-right-style: solid; border-right-width: 1px; border-right-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.1); border-left-style: solid; border-left-width: 1px; border-left-color: rgba(0, 0, 0, 0.1); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: white; transition-property: border-color; transition-duration: 200ms; transition-timing-function: ease;","variants":{"main_current":{"styleLess":"margin-top: -1px; margin-bottom: -1px; border-top-width: 2px; border-top-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); border-right-width: 2px; border-right-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); border-bottom-width: 2px; border-bottom-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); border-left-width: 2px; border-left-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); background-color: hsla(0, 0.00%, 100.00%, 1.00); color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00);"},"tiny":{"styleLess":"width: 100%;"},"main_hover":{"styleLess":"border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black;"}},"children":["6e1f597a-38d1-1ba6-03be-10b320a2df28","7cfd8b49-c9b1-99b6-1e8d-46ec2d28d16b"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2ba286b5-8cd8-f6a5-7b1b-01ae82eb5b2f","fake":false,"type":"class","name":"trigger-text","namespace":"","comb":"","styleLess":"display: flex; margin-top: 1em; justify-content: center; align-items: center; grid-column-gap: 0.5em; font-size: 0.7em; line-height: 2em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65d3","fake":false,"type":"class","name":"flex-row-outer","namespace":"","comb":"","styleLess":"display: flex; justify-content: space-between; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"41d70b1e-85e6-2641-48d8-2599be99d480","fake":false,"type":"class","name":"lock-icon","namespace":"","comb":"","styleLess":"display: flex; width: 1.6em; height: 1.6em; margin-bottom: 0.2em; justify-content: center; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"f101c609-2224-10de-1a0b-3691ca20da1b","fake":false,"type":"class","name":"center-text","namespace":"","comb":"","styleLess":"text-align: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"10f4d79d-84b7-0e3d-a5b6-f8fa044e9732","fake":false,"type":"class","name":"black","namespace":"","comb":"&","styleLess":"color: black;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9970f322-3716-0e4e-7fde-8796690c614c","fake":false,"type":"class","name":"price-modifier","namespace":"","comb":"","styleLess":"color: #676767; font-size: 12px; line-height: 1.1em; font-weight: 400;","variants":{"small":{"styleLess":"font-size: 11px; line-height: 1.5em;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65d6","fake":false,"type":"class","name":"tab-radio-button","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: auto; right: 15px; bottom: 15px; width: 20px; height: 20px; border-top-style: solid; border-top-width: 2px; border-top-color: hsla(0, 0.00%, 69.02%, 1.00); border-right-style: solid; border-right-width: 2px; border-right-color: hsla(0, 0.00%, 69.02%, 1.00); border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: hsla(0, 0.00%, 69.02%, 1.00); border-left-style: solid; border-left-width: 2px; border-left-color: hsla(0, 0.00%, 69.02%, 1.00); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"c63bf99a-4356-684f-c4b1-c19de99cbb72","fake":false,"type":"class","name":"price-name","namespace":"","comb":"","styleLess":"margin-bottom: 0.33em; color: black; font-size: 17px; font-weight: 700; letter-spacing: 2px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"00700620-15bc-5d19-bf0e-8cce2a594a4d","fake":false,"type":"class","name":"white-card","namespace":"","comb":"","styleLess":"width: 100%; min-height: 200px; padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em; border-top-style: solid; border-top-width: 1px; border-top-color: #eee; border-right-style: solid; border-right-width: 1px; border-right-color: #eee; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #eee; border-left-style: solid; border-left-width: 1px; border-left-color: #eee; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: white; box-shadow: 0 50px 30px -10px hsla(0, 0.00%, 0.00%, 0.10);","variants":{"tiny":{"styleLess":"padding-top: 5vw; padding-right: 5vw; padding-bottom: 5vw; padding-left: 5vw;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"579e29bb-5563-c840-44db-9d63355acc29","fake":false,"type":"class","name":"text-grey","namespace":"","comb":"","styleLess":"color: #676767;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"058dbaf5-95ba-eb92-3958-ef5f1a932a52","fake":false,"type":"class","name":"flex-price-wrap","namespace":"","comb":"","styleLess":"display: flex; justify-content: space-between; flex-wrap: wrap;","variants":{"tiny":{"styleLess":"grid-row-gap: 2em;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"a9d2486c-c256-8e75-7180-391f303373bf","fake":false,"type":"class","name":"price-h2","namespace":"","comb":"","styleLess":"margin-bottom: 5px; font-size: 2em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"98dd9f0f-cf08-b150-214c-3a117a77d6e1","fake":false,"type":"class","name":"big-price","namespace":"","comb":"","styleLess":"color: black; font-size: 2.5em; line-height: 1.4em; font-weight: 500;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65dc","fake":false,"type":"class","name":"price-button","namespace":"","comb":"","styleLess":"display: block; margin-top: 1em; padding-top: 0.8em; padding-right: 1.5em; padding-bottom: 0.8em; padding-left: 1.5em; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: hsla(255.82677165354335, 100.00%, 50.20%, 1.00); transition-property: background-color; transition-duration: 300ms; transition-timing-function: ease; color: white; font-size: 15px; line-height: 1.6em; font-weight: 700; text-align: center; text-decoration: none;","variants":{"main_hover":{"styleLess":"background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)); box-shadow: 0 10px 20px -5px rgba(24, 16, 99, 0.36);"}},"children":["53c65024-d539-4af3-a3fb-1fb72c3f65dd","965fa345-8bd2-b4c1-c17f-ed42afa00b7f"],"selector":null},{"_id":"a4a15abd-6309-7ebe-0aa8-d2bb07f5f720","fake":false,"type":"class","name":"price-table","namespace":"","comb":"","styleLess":"margin-top: 2em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"537b5ed7-afc3-c4f3-0acc-c1092f21d6a1","fake":false,"type":"class","name":"recommended","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: -1em; right: 0%; bottom: auto; width: 110px; margin-right: auto; margin-left: auto; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; background-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); color: white; font-size: 0.75em; font-weight: 600; text-align: center; letter-spacing: 0.5px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"d1673d22-acd1-08aa-7038-653e30f30e4a","fake":false,"type":"class","name":"price-icon","namespace":"","comb":"","styleLess":"display: flex; width: 40px; height: 40px; margin-right: 0.8em; margin-bottom: 1em; padding-top: 0.4em; padding-right: 0.4em; padding-bottom: 0.4em; padding-left: 0.4em; justify-content: center; align-items: center; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(200.00000000000037, 33.33%, 98.24%, 1.00);","variants":{},"children":["10f4d79d-84b7-0e3d-a5b6-f8fa044e9732"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65d8","fake":false,"type":"class","name":"price-description","namespace":"","comb":"","styleLess":"margin-top: auto; padding-right: 25px; color: #676767; font-size: 14px;","variants":{"small":{"styleLess":"font-size: 11px; line-height: 1.5em;"}},"children":[],"selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65db","fake":false,"type":"class","name":"👋 Custom CSS","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"3a1dfc5b-e1f6-fe02-4e82-9910083cca86","type":"Block","tag":"div","classes":["00700620-15bc-5d19-bf0e-8cce2a594a4d"],"children":["469593fe-e70c-950f-04be-194c4a1bcd08","5ecaf993-6b56-18a4-e5b1-4a85b7e103a3","c0744c5c-833d-1245-b18e-f3d69443bd90"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"469593fe-e70c-950f-04be-194c4a1bcd08","type":"Block","tag":"div","classes":["f101c609-2224-10de-1a0b-3691ca20da1b"],"children":["212b8bd6-929c-887a-3c2e-270d9131c743","e314420c-bf08-98f5-1f6f-76499ce09ff5"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"212b8bd6-929c-887a-3c2e-270d9131c743","type":"Heading","tag":"h2","classes":["a9d2486c-c256-8e75-7180-391f303373bf"],"children":["212b8bd6-929c-887a-3c2e-270d9131c744"],"data":{"tag":"h2","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"212b8bd6-929c-887a-3c2e-270d9131c744","text":true,"v":"Pick a Pro Plan"},{"_id":"e314420c-bf08-98f5-1f6f-76499ce09ff5","type":"Block","tag":"div","classes":["579e29bb-5563-c840-44db-9d63355acc29"],"children":["e314420c-bf08-98f5-1f6f-76499ce09ff6"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e314420c-bf08-98f5-1f6f-76499ce09ff6","text":true,"v":"Choose your preferred \"Pro Access\" plan below"},{"_id":"5ecaf993-6b56-18a4-e5b1-4a85b7e103a3","type":"Block","tag":"div","classes":["a4a15abd-6309-7ebe-0aa8-d2bb07f5f720"],"children":["03525fcf-0162-4a27-a82a-c89709899a01","03525fcf-0162-4a27-a82a-c89709899a06"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a01","type":"HtmlEmbed","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65db"],"children":[],"v":"<style>\n.price-box-tall.w--current .tab-radio-button {\n border: 6px solid #ffbb38;\n}\n.price-box-tall.w--current .price-icon {\ncolor: #ffbb38;\nbackground: #fff8eb;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<style>\n.price-box-tall.w--current .tab-radio-button {\n border: 6px solid #ffbb38;\n}\n.price-box-tall.w--current .price-icon {\ncolor: #ffbb38;\nbackground: #fff8eb;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a06","type":"TabsWrapper","tag":"div","classes":[],"children":["03525fcf-0162-4a27-a82a-c89709899a07","03525fcf-0162-4a27-a82a-c89709899a1e"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tabs":{"type":"wrapper","current":"Tab 2","easing":"ease","fadeIn":100,"fadeOut":100}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a07","type":"TabsMenu","tag":"div","classes":["058dbaf5-95ba-eb92-3958-ef5f1a932a52"],"children":["03525fcf-0162-4a27-a82a-c89709899a08","03525fcf-0162-4a27-a82a-c89709899a13"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"menu"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a08","type":"TabsLink","tag":"a","classes":["9c5c6b53-032f-9725-0238-612098848176"],"children":["32afd6f7-f788-ce01-02d0-b9445ebf1a81","03525fcf-0162-4a27-a82a-c89709899a09","03525fcf-0162-4a27-a82a-c89709899a0e","03525fcf-0162-4a27-a82a-c89709899a10","03525fcf-0162-4a27-a82a-c89709899a12"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Tab 1"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"32afd6f7-f788-ce01-02d0-b9445ebf1a81","type":"HtmlEmbed","tag":"div","classes":["d1673d22-acd1-08aa-7038-653e30f30e4a","10f4d79d-84b7-0e3d-a5b6-f8fa044e9732"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z\"/></svg>","data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":true},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a09","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d3"],"children":["03525fcf-0162-4a27-a82a-c89709899a0a"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a0a","type":"Block","tag":"div","classes":["c63bf99a-4356-684f-c4b1-c19de99cbb72"],"children":["03525fcf-0162-4a27-a82a-c89709899a0b"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a0b","text":true,"v":"MONTHLY"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a0e","type":"Block","tag":"div","classes":["98dd9f0f-cf08-b150-214c-3a117a77d6e1"],"children":["b8d98136-ee79-6ced-17b6-2b8193ae2796","03525fcf-0162-4a27-a82a-c89709899a0f","ae79c514-259d-f47e-e6db-1b1975d1f211"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b8d98136-ee79-6ced-17b6-2b8193ae2796","type":"Span","tag":"span","classes":["9970f322-3716-0e4e-7fde-8796690c614c"],"children":["81799243-a2d1-e4fb-a36d-36ee218719e3"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"81799243-a2d1-e4fb-a36d-36ee218719e3","text":true,"v":"$"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a0f","text":true,"v":"18"},{"_id":"ae79c514-259d-f47e-e6db-1b1975d1f211","type":"Span","tag":"span","classes":["9970f322-3716-0e4e-7fde-8796690c614c"],"children":["14edcc24-1e07-67d2-e2c4-af5919e5d36a"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"14edcc24-1e07-67d2-e2c4-af5919e5d36a","text":true,"v":"/month"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a10","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d8"],"children":["03525fcf-0162-4a27-a82a-c89709899a11"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a11","text":true,"v":"Cancel anytime. "},{"_id":"03525fcf-0162-4a27-a82a-c89709899a12","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d6"],"children":[],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false,"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a13","type":"TabsLink","tag":"a","classes":["9c5c6b53-032f-9725-0238-612098848176"],"children":["ad39fd69-6d80-ff58-1354-1bf98adf901b","03525fcf-0162-4a27-a82a-c89709899a14","03525fcf-0162-4a27-a82a-c89709899a19","03525fcf-0162-4a27-a82a-c89709899a1b","03525fcf-0162-4a27-a82a-c89709899a1d","fe6287c1-da5b-0139-28d8-a080bb15deaf"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Tab 2"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"ad39fd69-6d80-ff58-1354-1bf98adf901b","type":"HtmlEmbed","tag":"div","classes":["d1673d22-acd1-08aa-7038-653e30f30e4a"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><g><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/></g><g><path d=\"m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z\"/></g></svg>","data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":true},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\"><g><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/></g><g><path d=\"m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z\"/></g></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a14","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d3"],"children":["03525fcf-0162-4a27-a82a-c89709899a15"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a15","type":"Block","tag":"div","classes":["c63bf99a-4356-684f-c4b1-c19de99cbb72"],"children":["03525fcf-0162-4a27-a82a-c89709899a16"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a16","text":true,"v":"YEARLY"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a19","type":"Block","tag":"div","classes":["98dd9f0f-cf08-b150-214c-3a117a77d6e1"],"children":["bdc53db7-b3fe-a84e-e3a1-8de5837ad54d","03525fcf-0162-4a27-a82a-c89709899a1a","4ad3021f-5b43-5aa5-7bc6-662d1d97b125"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"bdc53db7-b3fe-a84e-e3a1-8de5837ad54d","type":"Span","tag":"span","classes":["9970f322-3716-0e4e-7fde-8796690c614c"],"children":["5b0c027b-89c7-a39c-f122-b913494ccd93"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5b0c027b-89c7-a39c-f122-b913494ccd93","text":true,"v":"$"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1a","text":true,"v":"169"},{"_id":"4ad3021f-5b43-5aa5-7bc6-662d1d97b125","type":"Span","tag":"span","classes":["9970f322-3716-0e4e-7fde-8796690c614c"],"children":["8925afaf-3f3a-efab-97c1-cb45c9ddba5e"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"8925afaf-3f3a-efab-97c1-cb45c9ddba5e","text":true,"v":"/year"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1b","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d8"],"children":["03525fcf-0162-4a27-a82a-c89709899a1c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1c","text":true,"v":"Save 20%!"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1d","type":"Block","tag":"div","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65d6"],"children":[],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false,"tag":"div"}},{"_id":"fe6287c1-da5b-0139-28d8-a080bb15deaf","type":"Block","tag":"div","classes":["537b5ed7-afc3-c4f3-0acc-c1092f21d6a1"],"children":["bfa56661-cdad-d177-7892-289a8b98d868"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"bfa56661-cdad-d177-7892-289a8b98d868","text":true,"v":"Recommended"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1e","type":"TabsContent","tag":"div","classes":[],"children":["03525fcf-0162-4a27-a82a-c89709899a1f","03525fcf-0162-4a27-a82a-c89709899a22"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"content"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a1f","type":"TabsPane","tag":"div","classes":[],"children":["03525fcf-0162-4a27-a82a-c89709899a20"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"","data-w-tab":"Tab 1"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a20","type":"Link","tag":"a","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65dc","965fa345-8bd2-b4c1-c17f-ed42afa00b7f"],"children":["03525fcf-0162-4a27-a82a-c89709899a21"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-price:update","value":"your_price_ID"}],"block":"","displayName":"","attr":{"id":"","href":"#"},"visibility":{"conditions":[]},"button":true,"link":{"url":"#","mode":"external"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a21","text":true,"v":"Checkout for $18/mo"},{"_id":"03525fcf-0162-4a27-a82a-c89709899a22","type":"TabsPane","tag":"div","classes":[],"children":["03525fcf-0162-4a27-a82a-c89709899a23"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"","data-w-tab":"Tab 2"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a23","type":"Link","tag":"a","classes":["53c65024-d539-4af3-a3fb-1fb72c3f65dc","965fa345-8bd2-b4c1-c17f-ed42afa00b7f"],"children":["03525fcf-0162-4a27-a82a-c89709899a24"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-price:update","value":"your_price_ID"}],"block":"","displayName":"","attr":{"id":"","href":"#"},"visibility":{"conditions":[]},"button":true,"link":{"url":"/signup","mode":"external"}}},{"_id":"03525fcf-0162-4a27-a82a-c89709899a24","text":true,"v":"Checkout for $169/yr"},{"_id":"c0744c5c-833d-1245-b18e-f3d69443bd90","type":"Block","tag":"div","classes":["2ba286b5-8cd8-f6a5-7b1b-01ae82eb5b2f"],"children":["12e985af-019c-ce62-20ec-53c97b8fbc6c","775b7db6-fbf1-b259-3dd0-7ec1ca94265b"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"12e985af-019c-ce62-20ec-53c97b8fbc6c","type":"HtmlEmbed","tag":"div","classes":["41d70b1e-85e6-2641-48d8-2599be99d480"],"children":[],"v":"<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_1_22456)\">\n<path d=\"M8 10V7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n<path d=\"M5 10H19V19C19 20.1046 18.1046 21 17 21H7C5.89543 21 5 20.1046 5 19V10Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"/>\n<rect x=\"14.5\" y=\"15.5\" width=\"0.01\" height=\"0.01\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_1_22456\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_1_22456)\">\n<path d=\"M8 10V7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n<path d=\"M5 10H19V19C19 20.1046 18.1046 21 17 21H7C5.89543 21 5 20.1046 5 19V10Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"/>\n<rect x=\"14.5\" y=\"15.5\" width=\"0.01\" height=\"0.01\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_1_22456\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"775b7db6-fbf1-b259-3dd0-7ec1ca94265b","type":"Block","tag":"div","classes":[],"children":["775b7db6-fbf1-b259-3dd0-7ec1ca94265c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"775b7db6-fbf1-b259-3dd0-7ec1ca94265c","text":true,"v":"Secured by Stripe | AES-256 bit encryption"}],"styles":[{"_id":"965fa345-8bd2-b4c1-c17f-ed42afa00b7f","fake":false,"type":"class","name":"margin-top","namespace":"","comb":"&","styleLess":"margin-top: 2em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9c5c6b53-032f-9725-0238-612098848176","fake":false,"type":"class","name":"price-box-tall","namespace":"","comb":"","styleLess":"display: flex; width: 48%; margin-top: 0px; margin-bottom: 0px; padding-top: 2em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; flex-direction: column; justify-content: space-between; border-top-style: solid; border-top-width: 1px; border-top-color: rgba(0, 0, 0, 0.1); border-right-style: solid; border-right-width: 1px; border-right-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.1); border-left-style: solid; border-left-width: 1px; border-left-color: rgba(0, 0, 0, 0.1); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: white; transition-property: border-color; transition-duration: 200ms; transition-timing-function: ease;","variants":{"main_current":{"styleLess":"margin-top: -1px; margin-bottom: -1px; border-top-width: 2px; border-top-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); border-right-width: 2px; border-right-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); border-bottom-width: 2px; border-bottom-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); border-left-width: 2px; border-left-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); background-color: hsla(0, 0.00%, 100.00%, 1.00); color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00);"},"tiny":{"styleLess":"width: 100%;"},"main_hover":{"styleLess":"border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black;"}},"children":["6e1f597a-38d1-1ba6-03be-10b320a2df28","7cfd8b49-c9b1-99b6-1e8d-46ec2d28d16b"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2ba286b5-8cd8-f6a5-7b1b-01ae82eb5b2f","fake":false,"type":"class","name":"trigger-text","namespace":"","comb":"","styleLess":"display: flex; margin-top: 1em; justify-content: center; align-items: center; grid-column-gap: 0.5em; font-size: 0.7em; line-height: 2em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65d3","fake":false,"type":"class","name":"flex-row-outer","namespace":"","comb":"","styleLess":"display: flex; justify-content: space-between; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"41d70b1e-85e6-2641-48d8-2599be99d480","fake":false,"type":"class","name":"lock-icon","namespace":"","comb":"","styleLess":"display: flex; width: 1.6em; height: 1.6em; margin-bottom: 0.2em; justify-content: center; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"f101c609-2224-10de-1a0b-3691ca20da1b","fake":false,"type":"class","name":"center-text","namespace":"","comb":"","styleLess":"text-align: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"10f4d79d-84b7-0e3d-a5b6-f8fa044e9732","fake":false,"type":"class","name":"black","namespace":"","comb":"&","styleLess":"color: black;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9970f322-3716-0e4e-7fde-8796690c614c","fake":false,"type":"class","name":"price-modifier","namespace":"","comb":"","styleLess":"color: #676767; font-size: 12px; line-height: 1.1em; font-weight: 400;","variants":{"small":{"styleLess":"font-size: 11px; line-height: 1.5em;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65d6","fake":false,"type":"class","name":"tab-radio-button","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: auto; right: 15px; bottom: 15px; width: 20px; height: 20px; border-top-style: solid; border-top-width: 2px; border-top-color: hsla(0, 0.00%, 69.02%, 1.00); border-right-style: solid; border-right-width: 2px; border-right-color: hsla(0, 0.00%, 69.02%, 1.00); border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: hsla(0, 0.00%, 69.02%, 1.00); border-left-style: solid; border-left-width: 2px; border-left-color: hsla(0, 0.00%, 69.02%, 1.00); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"c63bf99a-4356-684f-c4b1-c19de99cbb72","fake":false,"type":"class","name":"price-name","namespace":"","comb":"","styleLess":"margin-bottom: 0.33em; color: black; font-size: 17px; font-weight: 700; letter-spacing: 2px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"00700620-15bc-5d19-bf0e-8cce2a594a4d","fake":false,"type":"class","name":"white-card","namespace":"","comb":"","styleLess":"width: 100%; min-height: 200px; padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em; border-top-style: solid; border-top-width: 1px; border-top-color: #eee; border-right-style: solid; border-right-width: 1px; border-right-color: #eee; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #eee; border-left-style: solid; border-left-width: 1px; border-left-color: #eee; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: white; box-shadow: 0 50px 30px -10px hsla(0, 0.00%, 0.00%, 0.10);","variants":{"tiny":{"styleLess":"padding-top: 5vw; padding-right: 5vw; padding-bottom: 5vw; padding-left: 5vw;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"579e29bb-5563-c840-44db-9d63355acc29","fake":false,"type":"class","name":"text-grey","namespace":"","comb":"","styleLess":"color: #676767;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"058dbaf5-95ba-eb92-3958-ef5f1a932a52","fake":false,"type":"class","name":"flex-price-wrap","namespace":"","comb":"","styleLess":"display: flex; justify-content: space-between; flex-wrap: wrap;","variants":{"tiny":{"styleLess":"grid-row-gap: 2em;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"a9d2486c-c256-8e75-7180-391f303373bf","fake":false,"type":"class","name":"price-h2","namespace":"","comb":"","styleLess":"margin-bottom: 5px; font-size: 2em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"98dd9f0f-cf08-b150-214c-3a117a77d6e1","fake":false,"type":"class","name":"big-price","namespace":"","comb":"","styleLess":"color: black; font-size: 2.5em; line-height: 1.4em; font-weight: 500;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65dc","fake":false,"type":"class","name":"price-button","namespace":"","comb":"","styleLess":"display: block; margin-top: 1em; padding-top: 0.8em; padding-right: 1.5em; padding-bottom: 0.8em; padding-left: 1.5em; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: hsla(255.82677165354335, 100.00%, 50.20%, 1.00); transition-property: background-color; transition-duration: 300ms; transition-timing-function: ease; color: white; font-size: 15px; line-height: 1.6em; font-weight: 700; text-align: center; text-decoration: none;","variants":{"main_hover":{"styleLess":"background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)); box-shadow: 0 10px 20px -5px rgba(24, 16, 99, 0.36);"}},"children":["53c65024-d539-4af3-a3fb-1fb72c3f65dd","965fa345-8bd2-b4c1-c17f-ed42afa00b7f"],"selector":null},{"_id":"a4a15abd-6309-7ebe-0aa8-d2bb07f5f720","fake":false,"type":"class","name":"price-table","namespace":"","comb":"","styleLess":"margin-top: 2em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"537b5ed7-afc3-c4f3-0acc-c1092f21d6a1","fake":false,"type":"class","name":"recommended","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: -1em; right: 0%; bottom: auto; width: 110px; margin-right: auto; margin-left: auto; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; background-color: hsla(39.49748743718593, 100.00%, 60.98%, 1.00); color: white; font-size: 0.75em; font-weight: 600; text-align: center; letter-spacing: 0.5px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"d1673d22-acd1-08aa-7038-653e30f30e4a","fake":false,"type":"class","name":"price-icon","namespace":"","comb":"","styleLess":"display: flex; width: 40px; height: 40px; margin-right: 0.8em; margin-bottom: 1em; padding-top: 0.4em; padding-right: 0.4em; padding-bottom: 0.4em; padding-left: 0.4em; justify-content: center; align-items: center; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(200.00000000000037, 33.33%, 98.24%, 1.00);","variants":{},"children":["10f4d79d-84b7-0e3d-a5b6-f8fa044e9732"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65d8","fake":false,"type":"class","name":"price-description","namespace":"","comb":"","styleLess":"margin-top: auto; padding-right: 25px; color: #676767; font-size: 14px;","variants":{"small":{"styleLess":"font-size: 11px; line-height: 1.5em;"}},"children":[],"selector":null},{"_id":"53c65024-d539-4af3-a3fb-1fb72c3f65db","fake":false,"type":"class","name":"👋 Custom CSS","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
CC Chrome or SS Safari.

About this component

AI Generated

Component Description (Generated by AI)

The Pick a Plan UI is a versatile tab-based pricing table designed for easy integration into any webpage, allowing users to select their preferred subscription plan with a clear display of pricing options.

Key Features:

  • Tab-based navigation for easy plan selection
  • Customizable pricing options
  • Responsive design suitable for various devices
  • Includes a 'Recommended' label for highlighted plans
  • CSS styles for visual customization

Design Elements:

  • Clean and modern layout with a white background
  • Use of vibrant colors for buttons and highlights
  • Rounded corners and subtle shadows for depth
  • Icons and graphics for visual appeal

Potential Use Cases:

  • SaaS companies offering subscription services
  • E-commerce platforms with membership options
  • Online course providers with tiered pricing
  • Non-profits looking to showcase donation plans
  • Event organizers offering different ticket types

Conclusion: The Pick a Plan UI is an effective and visually appealing solution for businesses looking to present their pricing options clearly and attractively, enhancing user experience and conversion rates.

Start building

Start building your dreams

Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.