Loading Component...
Loading
Thank you! I'll update
this project ASAP.
this project ASAP.
Oops! Something went wrong while submitting the form.
How to enable Google authentication
How to enable Facebook authentication
How to enable Spotify authentication
How to enable Dribbble authentication
How to enable Github authentication
How to enable LinkedIn authentication
How to enable passwordless logins
How to configure password validation
How to show/hide password
How to work with profile images
How to add a forgot password flow
How to work with checkboxes
How to configure pricing tables
About the Stripe Customer Portal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"604333be-c111-9f09-540e-2debeb062321","type":"Block","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062322","604333be-c111-9f09-540e-2debeb062323"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062322","type":"HtmlEmbed","tag":"div","classes":["0eb2a174-f221-3df6-5c29-54c037d9fd95"],"children":[],"v":"<style>\n.w-slider-dot {\n background: grey;\n height: 5px;\n width: 10px;\n border-radius: 5px;\n}\n.w-slider-dot.w-active {\n background: #333;\n width: 30px;\n}\n\n.pricing-box.w--current .tab-radio-button {\n border: 6px solid black;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<style>\n.w-slider-dot {\n background: grey;\n height: 5px;\n width: 10px;\n border-radius: 5px;\n}\n.w-slider-dot.w-active {\n background: #333;\n width: 30px;\n}\n\n.pricing-box.w--current .tab-radio-button {\n border: 6px solid black;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"604333be-c111-9f09-540e-2debeb062323","type":"Block","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062324","604333be-c111-9f09-540e-2debeb062328","604333be-c111-9f09-540e-2debeb062347"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062324","type":"Block","tag":"div","classes":["c5926710-8d39-5545-e150-0dcd81255ec3"],"children":["604333be-c111-9f09-540e-2debeb062325"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062325","type":"Block","tag":"div","classes":["83450bdb-786b-a486-92b5-7c8d7798341a"],"children":["604333be-c111-9f09-540e-2debeb062326"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062326","text":true,"v":"Choose your plan"},{"_id":"604333be-c111-9f09-540e-2debeb062328","type":"TabsWrapper","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062329","604333be-c111-9f09-540e-2debeb062340"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tabs":{"type":"wrapper","current":"Tab 1","easing":"ease","fadeIn":100,"fadeOut":100}}},{"_id":"604333be-c111-9f09-540e-2debeb062329","type":"TabsMenu","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb06232a","604333be-c111-9f09-540e-2debeb062335"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"menu"}}},{"_id":"604333be-c111-9f09-540e-2debeb06232a","type":"TabsLink","tag":"a","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b3a"],"children":["604333be-c111-9f09-540e-2debeb06232b","604333be-c111-9f09-540e-2debeb062330","604333be-c111-9f09-540e-2debeb062332","604333be-c111-9f09-540e-2debeb062334"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"data-w-tab":"Tab 1","id":""},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"604333be-c111-9f09-540e-2debeb06232b","type":"Block","tag":"div","classes":["c5926710-8d39-5545-e150-0dcd81255ec3"],"children":["604333be-c111-9f09-540e-2debeb06232c","604333be-c111-9f09-540e-2debeb06232e"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06232c","type":"Block","tag":"div","classes":["0654481c-fe18-81c7-8fea-13a72bf4ab3a"],"children":["604333be-c111-9f09-540e-2debeb06232d"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06232d","text":true,"v":"MONTHLY"},{"_id":"604333be-c111-9f09-540e-2debeb06232e","type":"Block","tag":"div","classes":["4d8226b1-0237-c109-e5df-402791a79cea"],"children":["604333be-c111-9f09-540e-2debeb06232f"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06232f","text":true,"v":"1 Week Free Trial"},{"_id":"604333be-c111-9f09-540e-2debeb062330","type":"Block","tag":"div","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b39"],"children":["604333be-c111-9f09-540e-2debeb062331"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062331","text":true,"v":"$17.99/month"},{"_id":"604333be-c111-9f09-540e-2debeb062332","type":"Block","tag":"div","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b37","bd0a62e0-f4db-1d25-c5ea-de0a78ef72f8"],"children":["604333be-c111-9f09-540e-2debeb062333"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062333","text":true,"v":"Then $17.99 per month. Cancel anytime."},{"_id":"604333be-c111-9f09-540e-2debeb062334","type":"Block","tag":"div","classes":["9759c505-bf78-8918-4b64-0a8baba0f9cd"],"children":[],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062335","type":"TabsLink","tag":"a","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b3a"],"children":["604333be-c111-9f09-540e-2debeb062336","604333be-c111-9f09-540e-2debeb06233b","604333be-c111-9f09-540e-2debeb06233d","604333be-c111-9f09-540e-2debeb06233f"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"data-w-tab":"Tab 2","id":""},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"604333be-c111-9f09-540e-2debeb062336","type":"Block","tag":"div","classes":["c5926710-8d39-5545-e150-0dcd81255ec3"],"children":["604333be-c111-9f09-540e-2debeb062337","604333be-c111-9f09-540e-2debeb062339"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062337","type":"Block","tag":"div","classes":["0654481c-fe18-81c7-8fea-13a72bf4ab3a"],"children":["604333be-c111-9f09-540e-2debeb062338"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062338","text":true,"v":"YEARLY"},{"_id":"604333be-c111-9f09-540e-2debeb062339","type":"Block","tag":"div","classes":["4d8226b1-0237-c109-e5df-402791a79cea"],"children":["604333be-c111-9f09-540e-2debeb06233a"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06233a","text":true,"v":"1 Week Free Trial + Save 10%"},{"_id":"604333be-c111-9f09-540e-2debeb06233b","type":"Block","tag":"div","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b39"],"children":["604333be-c111-9f09-540e-2debeb06233c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06233c","text":true,"v":"$169.99/year"},{"_id":"604333be-c111-9f09-540e-2debeb06233d","type":"Block","tag":"div","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b37","bd0a62e0-f4db-1d25-c5ea-de0a78ef72f8"],"children":["604333be-c111-9f09-540e-2debeb06233e"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06233e","text":true,"v":"Then $169.99 per month. Cancel anytime."},{"_id":"604333be-c111-9f09-540e-2debeb06233f","type":"Block","tag":"div","classes":["9759c505-bf78-8918-4b64-0a8baba0f9cd"],"children":[],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062340","type":"TabsContent","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062341","604333be-c111-9f09-540e-2debeb062344"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"content"}}},{"_id":"604333be-c111-9f09-540e-2debeb062341","type":"TabsPane","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062342"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"data-w-tab":"Tab 1","id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"604333be-c111-9f09-540e-2debeb062342","type":"Link","tag":"a","classes":["0f265876-0af7-f480-10a6-b2a7adf3cfbb","fb37384c-3302-2ab8-1124-c9de8ec05c9b"],"children":["604333be-c111-9f09-540e-2debeb062343"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-price:update","value":"your_price_ID"}],"block":"","displayName":"","attr":{"href":"#","id":""},"visibility":{"conditions":[]},"button":true,"link":{"url":"#","mode":"external"}}},{"_id":"604333be-c111-9f09-540e-2debeb062343","text":true,"v":"Checkout for $17.99/mo"},{"_id":"604333be-c111-9f09-540e-2debeb062344","type":"TabsPane","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062345"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"data-w-tab":"Tab 2","id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"604333be-c111-9f09-540e-2debeb062345","type":"Link","tag":"a","classes":["0f265876-0af7-f480-10a6-b2a7adf3cfbb","fb37384c-3302-2ab8-1124-c9de8ec05c9b"],"children":["604333be-c111-9f09-540e-2debeb062346"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-price:update","value":"your_price_ID"}],"block":"","displayName":"","attr":{"href":"#","id":""},"visibility":{"conditions":[]},"button":true,"link":{"url":"/signup","mode":"external"}}},{"_id":"604333be-c111-9f09-540e-2debeb062346","text":true,"v":"Checkout for $169.99/yr"},{"_id":"604333be-c111-9f09-540e-2debeb062347","type":"Link","tag":"a","classes":["02b4c208-476a-2c17-60a1-a1f3b25471ac"],"children":["604333be-c111-9f09-540e-2debeb062348"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"/login"}}},{"_id":"604333be-c111-9f09-540e-2debeb062348","text":true,"v":"Already Subscribed?"}],"styles":[{"_id":"2cfeb9ae-0398-8c83-d450-de2cc28c7b39","fake":false,"type":"class","name":"Price","namespace":"","comb":"","styleLess":"margin-bottom: 5px; font-size: 17px; font-weight: 500;","variants":{"small":{"styleLess":"font-size: 26px;"}},"children":[],"selector":null},{"_id":"c5926710-8d39-5545-e150-0dcd81255ec3","fake":false,"type":"class","name":"Flex Outer Row","namespace":"","comb":"","styleLess":"display: flex; justify-content: space-between; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2cfeb9ae-0398-8c83-d450-de2cc28c7b3a","fake":false,"type":"class","name":"Pricing Box","namespace":"","comb":"","styleLess":"overflow: hidden; width: 100%; margin-top: 0px; margin-bottom: 15px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; 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; box-shadow: none /* 0 0 14px 0 rgba(0, 0, 0, 0.2) */; transition-property: transform, box-shadow; transition-duration: 200ms, 200ms; transition-timing-function: ease-out, ease;","variants":{"small":{"styleLess":"width: 49%;"},"tiny":{"styleLess":"display: block; width: 100%; margin-bottom: 50px;"},"main_current":{"styleLess":"border-top-width: 2px; border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-width: 2px; border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-width: 2px; border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-width: 2px; border-left-color: hsla(0, 0.00%, 0.00%, 1.00); background-color: white; font-size: 14px;"}},"children":[],"selector":null},{"_id":"02b4c208-476a-2c17-60a1-a1f3b25471ac","fake":false,"type":"class","name":"Upgrade Link","namespace":"","comb":"","styleLess":"display: inline-block; margin-top: 15px; margin-bottom: 15px; border-bottom-style: solid; border-bottom-width: 0.5px; border-bottom-color: black; color: black; text-decoration: none;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb37384c-3302-2ab8-1124-c9de8ec05c9b","fake":false,"type":"class","name":"Checkout Button","namespace":"","comb":"&","styleLess":"margin-top: 15px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9759c505-bf78-8918-4b64-0a8baba0f9cd","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":"83450bdb-786b-a486-92b5-7c8d7798341a","fake":false,"type":"class","name":"Price Label","namespace":"","comb":"","styleLess":"margin-bottom: 15px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"bd0a62e0-f4db-1d25-c5ea-de0a78ef72f8","fake":false,"type":"class","name":"No Margin","namespace":"","comb":"&","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2cfeb9ae-0398-8c83-d450-de2cc28c7b37","fake":false,"type":"class","name":"Price Text Grey","namespace":"","comb":"","styleLess":"margin-bottom: 15px; padding-left: 6px; color: hsla(0, 0.67%, 45.69%, 1.00); font-size: 14px;","variants":{"small":{"styleLess":"font-size: 11px; line-height: 1.5em;"}},"children":["c82effdf-4e7b-a693-2aa1-c00eb7e0cfdc","bd0a62e0-f4db-1d25-c5ea-de0a78ef72f8"],"selector":null},{"_id":"0654481c-fe18-81c7-8fea-13a72bf4ab3a","fake":false,"type":"class","name":"Price Frequency","namespace":"","comb":"","styleLess":"margin-bottom: 5px; color: hsla(0, 0.00%, 69.02%, 1.00); font-size: 12px; font-weight: 500; letter-spacing: 2px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4d8226b1-0237-c109-e5df-402791a79cea","fake":false,"type":"class","name":"Discount Label","namespace":"","comb":"","styleLess":"display: inline-block; margin-bottom: 5px; padding-top: 1px; padding-right: 10px; padding-left: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(150.00000000000009, 50.00%, 96.08%, 1.00); color: hsla(150.2439024390244, 71.65%, 28.35%, 1.00); font-size: 12px; font-weight: 600;","variants":{},"children":["2b3f2814-0171-5ae5-9ebc-c273dac387fa"],"selector":null},{"_id":"0eb2a174-f221-3df6-5c29-54c037d9fd95","fake":false,"type":"class","name":"👋 Custom CSS","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"0f265876-0af7-f480-10a6-b2a7adf3cfbb","fake":false,"type":"class","name":"Upgrade Button","namespace":"","comb":"","styleLess":"display: block; padding-top: 15px; padding-right: 22px; padding-bottom: 15px; padding-left: 22px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: black; 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-color: black; box-shadow: 0 10px 20px -5px rgba(24, 16, 99, 0.36);"}},"children":["edd0e2f7-46b1-1c0a-ccfe-a40e6705aa27","fb37384c-3302-2ab8-1124-c9de8ec05c9b"],"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":"604333be-c111-9f09-540e-2debeb062321","type":"Block","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062322","604333be-c111-9f09-540e-2debeb062323"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062322","type":"HtmlEmbed","tag":"div","classes":["0eb2a174-f221-3df6-5c29-54c037d9fd95"],"children":[],"v":"<style>\n.w-slider-dot {\n background: grey;\n height: 5px;\n width: 10px;\n border-radius: 5px;\n}\n.w-slider-dot.w-active {\n background: #333;\n width: 30px;\n}\n\n.pricing-box.w--current .tab-radio-button {\n border: 6px solid black;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<style>\n.w-slider-dot {\n background: grey;\n height: 5px;\n width: 10px;\n border-radius: 5px;\n}\n.w-slider-dot.w-active {\n background: #333;\n width: 30px;\n}\n\n.pricing-box.w--current .tab-radio-button {\n border: 6px solid black;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"604333be-c111-9f09-540e-2debeb062323","type":"Block","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062324","604333be-c111-9f09-540e-2debeb062328","604333be-c111-9f09-540e-2debeb062347"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062324","type":"Block","tag":"div","classes":["c5926710-8d39-5545-e150-0dcd81255ec3"],"children":["604333be-c111-9f09-540e-2debeb062325"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062325","type":"Block","tag":"div","classes":["83450bdb-786b-a486-92b5-7c8d7798341a"],"children":["604333be-c111-9f09-540e-2debeb062326"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062326","text":true,"v":"Choose your plan"},{"_id":"604333be-c111-9f09-540e-2debeb062328","type":"TabsWrapper","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062329","604333be-c111-9f09-540e-2debeb062340"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tabs":{"type":"wrapper","current":"Tab 1","easing":"ease","fadeIn":100,"fadeOut":100}}},{"_id":"604333be-c111-9f09-540e-2debeb062329","type":"TabsMenu","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb06232a","604333be-c111-9f09-540e-2debeb062335"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"menu"}}},{"_id":"604333be-c111-9f09-540e-2debeb06232a","type":"TabsLink","tag":"a","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b3a"],"children":["604333be-c111-9f09-540e-2debeb06232b","604333be-c111-9f09-540e-2debeb062330","604333be-c111-9f09-540e-2debeb062332","604333be-c111-9f09-540e-2debeb062334"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"data-w-tab":"Tab 1","id":""},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"604333be-c111-9f09-540e-2debeb06232b","type":"Block","tag":"div","classes":["c5926710-8d39-5545-e150-0dcd81255ec3"],"children":["604333be-c111-9f09-540e-2debeb06232c","604333be-c111-9f09-540e-2debeb06232e"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06232c","type":"Block","tag":"div","classes":["0654481c-fe18-81c7-8fea-13a72bf4ab3a"],"children":["604333be-c111-9f09-540e-2debeb06232d"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06232d","text":true,"v":"MONTHLY"},{"_id":"604333be-c111-9f09-540e-2debeb06232e","type":"Block","tag":"div","classes":["4d8226b1-0237-c109-e5df-402791a79cea"],"children":["604333be-c111-9f09-540e-2debeb06232f"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06232f","text":true,"v":"1 Week Free Trial"},{"_id":"604333be-c111-9f09-540e-2debeb062330","type":"Block","tag":"div","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b39"],"children":["604333be-c111-9f09-540e-2debeb062331"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062331","text":true,"v":"$17.99/month"},{"_id":"604333be-c111-9f09-540e-2debeb062332","type":"Block","tag":"div","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b37","bd0a62e0-f4db-1d25-c5ea-de0a78ef72f8"],"children":["604333be-c111-9f09-540e-2debeb062333"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062333","text":true,"v":"Then $17.99 per month. Cancel anytime."},{"_id":"604333be-c111-9f09-540e-2debeb062334","type":"Block","tag":"div","classes":["9759c505-bf78-8918-4b64-0a8baba0f9cd"],"children":[],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062335","type":"TabsLink","tag":"a","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b3a"],"children":["604333be-c111-9f09-540e-2debeb062336","604333be-c111-9f09-540e-2debeb06233b","604333be-c111-9f09-540e-2debeb06233d","604333be-c111-9f09-540e-2debeb06233f"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"data-w-tab":"Tab 2","id":""},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"604333be-c111-9f09-540e-2debeb062336","type":"Block","tag":"div","classes":["c5926710-8d39-5545-e150-0dcd81255ec3"],"children":["604333be-c111-9f09-540e-2debeb062337","604333be-c111-9f09-540e-2debeb062339"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062337","type":"Block","tag":"div","classes":["0654481c-fe18-81c7-8fea-13a72bf4ab3a"],"children":["604333be-c111-9f09-540e-2debeb062338"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062338","text":true,"v":"YEARLY"},{"_id":"604333be-c111-9f09-540e-2debeb062339","type":"Block","tag":"div","classes":["4d8226b1-0237-c109-e5df-402791a79cea"],"children":["604333be-c111-9f09-540e-2debeb06233a"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06233a","text":true,"v":"1 Week Free Trial + Save 10%"},{"_id":"604333be-c111-9f09-540e-2debeb06233b","type":"Block","tag":"div","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b39"],"children":["604333be-c111-9f09-540e-2debeb06233c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06233c","text":true,"v":"$169.99/year"},{"_id":"604333be-c111-9f09-540e-2debeb06233d","type":"Block","tag":"div","classes":["2cfeb9ae-0398-8c83-d450-de2cc28c7b37","bd0a62e0-f4db-1d25-c5ea-de0a78ef72f8"],"children":["604333be-c111-9f09-540e-2debeb06233e"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb06233e","text":true,"v":"Then $169.99 per month. Cancel anytime."},{"_id":"604333be-c111-9f09-540e-2debeb06233f","type":"Block","tag":"div","classes":["9759c505-bf78-8918-4b64-0a8baba0f9cd"],"children":[],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"604333be-c111-9f09-540e-2debeb062340","type":"TabsContent","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062341","604333be-c111-9f09-540e-2debeb062344"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"content"}}},{"_id":"604333be-c111-9f09-540e-2debeb062341","type":"TabsPane","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062342"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"data-w-tab":"Tab 1","id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"604333be-c111-9f09-540e-2debeb062342","type":"Link","tag":"a","classes":["0f265876-0af7-f480-10a6-b2a7adf3cfbb","fb37384c-3302-2ab8-1124-c9de8ec05c9b"],"children":["604333be-c111-9f09-540e-2debeb062343"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-price:update","value":"your_price_ID"}],"block":"","displayName":"","attr":{"href":"#","id":""},"visibility":{"conditions":[]},"button":true,"link":{"url":"#","mode":"external"}}},{"_id":"604333be-c111-9f09-540e-2debeb062343","text":true,"v":"Checkout for $17.99/mo"},{"_id":"604333be-c111-9f09-540e-2debeb062344","type":"TabsPane","tag":"div","classes":[],"children":["604333be-c111-9f09-540e-2debeb062345"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"data-w-tab":"Tab 2","id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"604333be-c111-9f09-540e-2debeb062345","type":"Link","tag":"a","classes":["0f265876-0af7-f480-10a6-b2a7adf3cfbb","fb37384c-3302-2ab8-1124-c9de8ec05c9b"],"children":["604333be-c111-9f09-540e-2debeb062346"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-price:update","value":"your_price_ID"}],"block":"","displayName":"","attr":{"href":"#","id":""},"visibility":{"conditions":[]},"button":true,"link":{"url":"/signup","mode":"external"}}},{"_id":"604333be-c111-9f09-540e-2debeb062346","text":true,"v":"Checkout for $169.99/yr"},{"_id":"604333be-c111-9f09-540e-2debeb062347","type":"Link","tag":"a","classes":["02b4c208-476a-2c17-60a1-a1f3b25471ac"],"children":["604333be-c111-9f09-540e-2debeb062348"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"/login"}}},{"_id":"604333be-c111-9f09-540e-2debeb062348","text":true,"v":"Already Subscribed?"}],"styles":[{"_id":"2cfeb9ae-0398-8c83-d450-de2cc28c7b39","fake":false,"type":"class","name":"Price","namespace":"","comb":"","styleLess":"margin-bottom: 5px; font-size: 17px; font-weight: 500;","variants":{"small":{"styleLess":"font-size: 26px;"}},"children":[],"selector":null},{"_id":"c5926710-8d39-5545-e150-0dcd81255ec3","fake":false,"type":"class","name":"Flex Outer Row","namespace":"","comb":"","styleLess":"display: flex; justify-content: space-between; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2cfeb9ae-0398-8c83-d450-de2cc28c7b3a","fake":false,"type":"class","name":"Pricing Box","namespace":"","comb":"","styleLess":"overflow: hidden; width: 100%; margin-top: 0px; margin-bottom: 15px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; 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; box-shadow: none /* 0 0 14px 0 rgba(0, 0, 0, 0.2) */; transition-property: transform, box-shadow; transition-duration: 200ms, 200ms; transition-timing-function: ease-out, ease;","variants":{"small":{"styleLess":"width: 49%;"},"tiny":{"styleLess":"display: block; width: 100%; margin-bottom: 50px;"},"main_current":{"styleLess":"border-top-width: 2px; border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-width: 2px; border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-width: 2px; border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-width: 2px; border-left-color: hsla(0, 0.00%, 0.00%, 1.00); background-color: white; font-size: 14px;"}},"children":[],"selector":null},{"_id":"02b4c208-476a-2c17-60a1-a1f3b25471ac","fake":false,"type":"class","name":"Upgrade Link","namespace":"","comb":"","styleLess":"display: inline-block; margin-top: 15px; margin-bottom: 15px; border-bottom-style: solid; border-bottom-width: 0.5px; border-bottom-color: black; color: black; text-decoration: none;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb37384c-3302-2ab8-1124-c9de8ec05c9b","fake":false,"type":"class","name":"Checkout Button","namespace":"","comb":"&","styleLess":"margin-top: 15px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9759c505-bf78-8918-4b64-0a8baba0f9cd","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":"83450bdb-786b-a486-92b5-7c8d7798341a","fake":false,"type":"class","name":"Price Label","namespace":"","comb":"","styleLess":"margin-bottom: 15px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"bd0a62e0-f4db-1d25-c5ea-de0a78ef72f8","fake":false,"type":"class","name":"No Margin","namespace":"","comb":"&","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2cfeb9ae-0398-8c83-d450-de2cc28c7b37","fake":false,"type":"class","name":"Price Text Grey","namespace":"","comb":"","styleLess":"margin-bottom: 15px; padding-left: 6px; color: hsla(0, 0.67%, 45.69%, 1.00); font-size: 14px;","variants":{"small":{"styleLess":"font-size: 11px; line-height: 1.5em;"}},"children":["c82effdf-4e7b-a693-2aa1-c00eb7e0cfdc","bd0a62e0-f4db-1d25-c5ea-de0a78ef72f8"],"selector":null},{"_id":"0654481c-fe18-81c7-8fea-13a72bf4ab3a","fake":false,"type":"class","name":"Price Frequency","namespace":"","comb":"","styleLess":"margin-bottom: 5px; color: hsla(0, 0.00%, 69.02%, 1.00); font-size: 12px; font-weight: 500; letter-spacing: 2px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4d8226b1-0237-c109-e5df-402791a79cea","fake":false,"type":"class","name":"Discount Label","namespace":"","comb":"","styleLess":"display: inline-block; margin-bottom: 5px; padding-top: 1px; padding-right: 10px; padding-left: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(150.00000000000009, 50.00%, 96.08%, 1.00); color: hsla(150.2439024390244, 71.65%, 28.35%, 1.00); font-size: 12px; font-weight: 600;","variants":{},"children":["2b3f2814-0171-5ae5-9ebc-c273dac387fa"],"selector":null},{"_id":"0eb2a174-f221-3df6-5c29-54c037d9fd95","fake":false,"type":"class","name":"👋 Custom CSS","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"0f265876-0af7-f480-10a6-b2a7adf3cfbb","fake":false,"type":"class","name":"Upgrade Button","namespace":"","comb":"","styleLess":"display: block; padding-top: 15px; padding-right: 22px; padding-bottom: 15px; padding-left: 22px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: black; 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-color: black; box-shadow: 0 10px 20px -5px rgba(24, 16, 99, 0.36);"}},"children":["edd0e2f7-46b1-1c0a-ccfe-a40e6705aa27","fb37384c-3302-2ab8-1124-c9de8ec05c9b"],"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
Chrome or Safari.
Chrome or Safari.
About this component
AI Generated
Component Description (Generated by AI)
This component features a sleek pricing table inspired by iOS design, allowing users to easily compare different subscription plans. It includes custom styling and functionality for an enhanced user experience.
Key Features:
- Interactive tabs for monthly and yearly pricing options
- Custom CSS for styling and easy editing
- Clear pricing structure with a free trial offer
- Responsive design suitable for various devices
- Loom video tutorial available for setup guidance
Design Elements:
- Modern and clean aesthetic resembling iOS interface
- Grey and black color scheme with white backgrounds
- Rounded corners and subtle shadows for depth
- Flexbox layout for responsive design
Potential Use Cases:
- SaaS companies looking to showcase subscription plans
- E-commerce websites offering membership services
- Online education platforms with tiered pricing
- Mobile app developers promoting in-app purchases
- Freelancers or agencies needing a pricing display for services
Conclusion: The iOS Style Pricing Tabs component is a versatile and visually appealing solution for businesses aiming to present their pricing plans effectively, enhancing user engagement 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.