Pricing Tabs with a Monthly/Yearly Toggle

Pricing tabs component with a monthly/yearly toggle switch in HTML and Tailwind CSS + Alpine.js

Share

/r/n <link rel=\"preconnect\" href=https://www.creative-tim.com/"https:////fonts.gstatic.com/" crossorigin>\r\n <link href=https://www.creative-tim.com/"https:////fonts.googleapis.com//css2?family=Inter:wght@400;500;600;700&display=swap\%22 rel=\"stylesheet\">\r\n <script defer src=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//npm//alpinejs@3.x.x//dist//cdn.min.js/">/r/n <script>\r\n tailwind.config = {\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n inter: ['Inter', 'sans-serif'],\r\n },\r\n },\r\n },\r\n };\r\n <\/script>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"relative font-inter antialiased\">\r\n <main class=\"relative min-h-screen flex flex-col justify-center bg-slate-50 overflow-hidden\">\r\n <div class=\"w-full max-w-6xl mx-auto px-4 md:px-6 py-24\">\r\n\r\n \r\n <div x-data=\"{ isAnnual: true }\">\r\n \r\n \r\n <div class=\"flex justify-center max-w-[14rem] m-auto mb-8 lg:mb-16\">\r\n <div class=\"relative flex w-full p-1 bg-white dark:bg-slate-900 rounded-full\">\r\n <span class=\"absolute inset-0 m-1 pointer-events-none\" aria-hidden=\"true\">\r\n <span class=\"absolute inset-0 w-1\/2 bg-indigo-500 rounded-full shadow-sm shadow-indigo-950\/10 transform transition-transform duration-150 ease-in-out\" :class=\"isAnnual ? 'translate-x-0' : 'translate-x-full'\"><\/span>\r\n <\/span>\r\n <button class=\"relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out\" :class=\"isAnnual ? 'text-white' : 'text-slate-500 dark:text-slate-400'\" @click=\"isAnnual = true\" :aria-pressed=\"isAnnual\">Yearly <span :class=\"isAnnual ? 'text-indigo-200' : 'text-slate-400 dark:text-slate-500'\">-20%<\/span><\/button>\r\n <button class=\"relative flex-1 text-sm font-medium h-8 rounded-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150 ease-in-out\" :class=\"isAnnual ? 'text-slate-500 dark:text-slate-400' : 'text-white'\" @click=\"isAnnual = false\" :aria-pressed=\"isAnnual\">Monthly<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"max-w-sm mx-auto grid gap-6 lg:grid-cols-3 items-start lg:max-w-none\">\r\n \r\n \r\n <div class=\"h-full\"> \r\n <div class=\"relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950\/5\">\r\n <div class=\"mb-5\">\r\n <div class=\"text-slate-900 dark:text-slate-200 font-semibold mb-1\">Essential<\/div>\r\n <div class=\"inline-flex items-baseline mb-2\">\r\n <span class=\"text-slate-900 dark:text-slate-200 font-bold text-3xl\">$<\/span>\r\n <span class=\"text-slate-900 dark:text-slate-200 font-bold text-4xl\" x-text=\"isAnnual ? '29' : '35'\">29<\/span>\r\n <span class=\"text-slate-500 font-medium\">\/mo<\/span>\r\n <\/div>\r\n <div class=\"text-sm text-slate-500 mb-5\">There are many variations available, but the majority have suffered.<\/div>\r\n <a class=\"w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950\/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150\" href=https://www.creative-tim.com/"#0\">\r\n Purchase Plan\r\n <\/a>\r\n <\/div>\r\n <div class=\"text-slate-900 dark:text-slate-200 font-medium mb-3\">Includes:<\/div>\r\n <ul class=\"text-slate-600 dark:text-slate-400 text-sm space-y-3 grow\">\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Unlimited placeholder texts<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Consectetur adipiscing elit<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Excepteur sint occaecat cupidatat<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Officia deserunt mollit anim<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"dark h-full\">\r\n <div class=\"relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950\/5\">\r\n <div class=\"absolute top-0 right-0 mr-6 -mt-4\">\r\n <div class=\"inline-flex items-center text-xs font-semibold py-1.5 px-3 bg-emerald-500 text-white rounded-full shadow-sm shadow-slate-950\/5\">Most Popular<\/div>\r\n <\/div>\r\n <div class=\"mb-5\">\r\n <div class=\"text-slate-900 dark:text-slate-200 font-semibold mb-1\">Perform<\/div>\r\n <div class=\"inline-flex items-baseline mb-2\">\r\n <span class=\"text-slate-900 dark:text-slate-200 font-bold text-3xl\">$<\/span>\r\n <span class=\"text-slate-900 dark:text-slate-200 font-bold text-4xl\" x-text=\"isAnnual ? '49' : '55'\">49<\/span>\r\n <span class=\"text-slate-500 font-medium\">\/mo<\/span>\r\n <\/div>\r\n <div class=\"text-sm text-slate-500 mb-5\">There are many variations available, but the majority have suffered.<\/div>\r\n <a class=\"w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950\/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150\" href=https://www.creative-tim.com/"#0\">\r\n Purchase Plan\r\n <\/a>\r\n <\/div>\r\n <div class=\"text-slate-900 dark:text-slate-200 font-medium mb-3\">Includes:<\/div>\r\n <ul class=\"text-slate-600 dark:text-slate-400 text-sm space-y-3 grow\">\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Unlimited placeholder texts<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Consectetur adipiscing elit<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Excepteur sint occaecat cupidatat<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Officia deserunt mollit anim<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Predefined chunks as necessary<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"h-full\">\r\n <div class=\"relative flex flex-col h-full p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-900 shadow shadow-slate-950\/5\">\r\n <div class=\"mb-5\">\r\n <div class=\"text-slate-900 dark:text-slate-200 font-semibold mb-1\">Enterprise<\/div>\r\n <div class=\"inline-flex items-baseline mb-2\">\r\n <span class=\"text-slate-900 dark:text-slate-200 font-bold text-3xl\">$<\/span>\r\n <span class=\"text-slate-900 dark:text-slate-200 font-bold text-4xl\" x-text=\"isAnnual ? '79' : '85'\">79<\/span>\r\n <span class=\"text-slate-500 font-medium\">\/mo<\/span>\r\n <\/div>\r\n <div class=\"text-sm text-slate-500 mb-5\">There are many variations available, but the majority have suffered.<\/div>\r\n <a class=\"w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950\/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 dark:focus-visible:ring-slate-600 transition-colors duration-150\" href=https://www.creative-tim.com/"#0\">\r\n Purchase Plan\r\n <\/a>\r\n <\/div>\r\n <div class=\"text-slate-900 dark:text-slate-200 font-medium mb-3\">Includes:<\/div>\r\n <ul class=\"text-slate-600 dark:text-slate-400 text-sm space-y-3 grow\">\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Unlimited placeholder texts<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Consectetur adipiscing elit<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Excepteur sint occaecat cupidatat<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Officia deserunt mollit anim<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Predefined chunks as necessary<\/span>\r\n <\/li>\r\n <li class=\"flex items-center\">\r\n <svg class=\"w-3 h-3 fill-emerald-500 mr-3 shrink-0\" viewBox=\"0 0 12 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z\" \/>\r\n <\/svg>\r\n <span>Free from repetition<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n <\/div>\r\n \r\n\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n<\/body>\r\n\r\n<\/html>","author_type":"App\\User","author_id":5888,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":1884,"popularity":195,"slug":"pricing-tabs-with-a-monthlyyearly-toggle","approved":1,"created_at":"2024-02-29T00:00:00.000000Z","updated_at":"2024-09-19T05:38:59.000000Z","downloads":61,"code_views":838,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11643,"model_type":"App\\Component","model_id":6404,"collection_name":"preview","name":"temp81779","file_name":"temp81779.png","mime_type":"image\/png","disk":"public","size":58237,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp81779___media_library_original_1280_957.png","temp81779___media_library_original_1070_800.png","temp81779___media_library_original_895_669.png","temp81779___media_library_original_749_560.png","temp81779___media_library_original_627_469.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU2RUdU9CMXIwVzBqaDVXeXRlUEpDUUZYSk5hUmNYdXc1V1RvR1ZGTERCTlp1U0h5c2tLRURPT0tFMHlXbWpFdkd2b2JvTmJqS21yaXFUK0puUkc5aGI2VFVTa2NnVWI2RXFOOXl0UlpKZFJsdE56TDh3NlVOVWI3aHFUNlpjMzBpNG5BMmlocWt2aFpNcm1vanFvd1ZCckNWTzVrcDJRcnlDVHF2RkwyWlh0QnJNQ20wRGlsN01QYURWd3E0QXFsQ3pGS2R6LzJRPT0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":2,"created_at":"2024-02-29T12:57:29.000000Z","updated_at":"2024-02-29T12:57:31.000000Z","conversions_disk":"public","uuid":"9e43ee2c-7b2f-4738-bb0a-b37aa72e4fa3","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11643\/temp81779.png","preview_url":""}],"author":{"id":5888,"name":"Pasquale Vitiello","slug":"pasquale-vitiello","bio":"Crafting UIs with Tailwind CSS. Behind Cruip\r\n and other cool projects.\r\nhttps:\/\/cruip.com https:\/\/saaslandingpage.com https:\/\/saasinterface.com","avatar":"\/storage\/avatars\/EDrC5X3fQiJWevFCJoBsHH6oEuOnPBN0A8VLKsEx.jpg","header":null,"created_at":"2021-11-23T16:51:57.000000Z","updated_at":"2024-02-23T12:06:56.000000Z"},"tags":[{"id":4,"name":{"en":"Cards"},"description":"Check out our examples of beautifully designed cards that will help you display your content easily. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our examples of beautifully designed cards that will help you display your content easily.","slug":{"en":"cards"},"type":null,"order_column":3,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:06:24.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6404,"tag_id":4}},{"id":53,"name":{"en":"Pricing"},"description":"The Pricing Section helps users compare products or services' features, benefits, and costs. See below our collection of beautiful Pricing Sections that you can add directly to your Tailwind UI project.","meta_description":"Visit our Pricing collection that you can add to your Tailwind UI project to create awesome websites.","slug":{"en":"pricing"},"type":null,"order_column":42,"created_at":"2023-07-20T07:30:42.000000Z","updated_at":"2023-07-20T07:49:40.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6404,"tag_id":53}}],"fork":null,"favorites":[{"id":18176,"name":"CamilaR2009","slug":"camilar2009","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/1fea97df5db7d652538ad4ec427648bc","header":null,"created_at":"2024-04-11T20:35:42.000000Z","updated_at":"2024-04-11T20:35:42.000000Z","pivot":{"component_id":6404,"user_id":18176}},{"id":19872,"name":"Igor097","slug":"igor097","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/26531334?v=4","header":null,"created_at":"2024-07-19T11:28:44.000000Z","updated_at":"2024-07-19T11:28:44.000000Z","pivot":{"component_id":6404,"user_id":19872}}]}" :edit="false"> Full screen Preview

Pasquale Vitiello

6 components

Pricing Tabs with a Monthly/Yearly Toggle

Community Rate

Related components