Tailwind CSS & Alpine.js Pricing page

Pricing page made using Tailwind CSS & Alpine.js

Share

/r/n <script defer src=https://www.creative-tim.com/"https:////unpkg.com//alpinejs@3.x.x//dist//cdn.min.js/">/r/n/r/n/r/n <div x-data=\"{ \r\n billingType: 'month', \r\n basicPrice: '19',\r\n premiumPrice: '29',\r\n proPrice: '39'\r\n }\" class=\"min-h-full bg-gray-200 pb-12\">\r\n <div class=\"w-full bg-blue-900 pt-16 pb-24 text-center\">\r\n <h4 class=\"text-2xl text-gray-100\">Choose the right plan for you<\/h4>\r\n <p class=\"text-sm text-gray-100 mt-2\">Pricing built for businesses of all sizes. Choose package that suits your needs.<\/p>\r\n <div class=\"flex items-center justify-center mt-8\">\r\n <button @click=\"\r\n billingType = 'month',\r\n basicPrice = '19',\r\n premiumPrice = '29',\r\n proPrice = '39'\r\n \" class=\"text-gray-800 px-4 py-2 rounded-tl-lg rounded-bl-lg bg-gray-200\" :class=\" billingType === 'month' ? 'bg-blue-300' : 'bg-gray-200' \" title=\"Choose Monthly billing\">\r\n Monthly billing\r\n <\/button>\r\n <button @click=\"\r\n billingType = 'year',\r\n basicPrice = '205',\r\n premiumPrice = '313',\r\n proPrice = '421'\r\n \" class=\"text-gray-800 px-4 py-2 rounded-tr-lg rounded-br-lg bg-gray-200\" :class=\" billingType === 'year' ? 'bg-blue-300' : 'bg-gray-200' \" title=\"Choose Annual billing\">\r\n Annual billing\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full 2xl:w-3\/4 flex items-center justify-center px-8 md:px-32 lg:px-16 2xl:px-0 mx-auto -mt-8\">\r\n <div class=\"w-full grid grid-cols-1 xl:grid-cols-3 gap-8\">\r\n <div class=\"bg-white shadow-2xl rounded-lg py-4\">\r\n <p class=\"text-xl text-center font-bold text-blue-600\">Basic<\/p>\r\n <p class=\"text-center py-8\">\r\n <span class=\"text-4xl font-bold text-gray-700\">\r\n $<span x-text=\"basicPrice\">19<\/span> \r\n <\/span>\r\n <span class=\"text-xs uppercase text-gray-500\">\r\n \/ <span x-text=\"billingType\">month<\/span>\r\n <\/span>\r\n <\/p>\r\n <ul class=\"border-t border-gray-300 py-8 space-y-6\">\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Free Setup Guidance<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Email Support<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">User Management<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Reports<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-gray-300 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-400 capitalize\">Unlimited Users<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-gray-300 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-400 capitalize\">Data Export<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-gray-300 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-400 capitalize\">Automated Workflows<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-gray-300 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-400 capitalize\">API Access<\/span>\r\n <\/li>\r\n <\/ul>\r\n <div class=\"flex items-center justify-center mt-6\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"bg-blue-600 hover:bg-blue-700 px-8 py-2 text-sm text-gray-200 uppercase rounded font-bold transition duration-150\" title=\"Purchase\">Purchase<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white shadow-2xl rounded-lg py-4\">\r\n <p class=\"text-xl text-center font-bold text-blue-600\">Premium<\/p>\r\n <p class=\"text-center py-8\">\r\n <span class=\"text-4xl font-bold text-gray-700\">\r\n $<span x-text=\"premiumPrice\">29<\/span>\r\n <\/span>\r\n <span class=\"text-xs uppercase text-gray-500\">\r\n \/ <span x-text=\"billingType\">month<\/span>\r\n <\/span>\r\n <\/p>\r\n <ul class=\"border-t border-gray-300 py-8 space-y-6\">\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Free Setup Guidance<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Email Support<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">User Management<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Reports<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Unlimited Users<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Data Export<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-gray-300 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-400 capitalize\">Automated Workflows<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-gray-300 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-400 capitalize\">API Access<\/span>\r\n <\/li>\r\n <\/ul>\r\n <div class=\"flex items-center justify-center mt-6\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"bg-blue-600 hover:bg-blue-700 px-8 py-2 text-sm text-gray-200 uppercase rounded font-bold transition duration-150\" title=\"Purchase\">Purchase<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white shadow-2xl rounded-lg py-4\">\r\n <p class=\"text-xl text-center font-bold text-blue-600\">Pro<\/p>\r\n <p class=\"text-center py-8\">\r\n <span class=\"text-4xl font-bold text-gray-700\">\r\n $<span x-text=\"proPrice\">39<\/span>\r\n <\/span>\r\n <span class=\"text-xs uppercase text-gray-500\">\r\n \/ <span x-text=\"billingType\">month<\/span>\r\n <\/span>\r\n <\/p>\r\n <ul class=\"border-t border-gray-300 py-8 space-y-6\">\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Free Setup Guidance<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Email Support<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">User Management<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Reports<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Unlimited Users<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Data Export<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">Automated Workflows<\/span>\r\n <\/li>\r\n <li class=\"flex items-center space-x-2 px-8\">\r\n <span class=\"bg-blue-600 rounded-full p-1\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3 w-3 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"text-gray-600 capitalize\">API Access<\/span>\r\n <\/li>\r\n <\/ul>\r\n <div class=\"flex items-center justify-center mt-6\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"bg-blue-600 hover:bg-blue-700 px-8 py-2 text-sm text-gray-200 uppercase rounded font-bold transition duration-150\" title=\"Purchase\">Purchase<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>","author_type":"App\\User","author_id":9885,"collection_id":null,"fork_id":null,"votes":7,"score":"3.6","visits":7006,"popularity":428,"slug":"tailwind-css-alpinejs-pricing-page","approved":1,"created_at":"2022-11-26T16:11:02.000000Z","updated_at":"2024-09-19T02:28:15.000000Z","downloads":119,"code_views":1497,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":8632,"model_type":"App\\Component","model_id":4191,"collection_name":"preview","name":"temp42431","file_name":"temp42431.png","mime_type":"image\/png","disk":"public","size":110286,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp42431___media_library_original_1280_957.png","temp42431___media_library_original_1070_800.png","temp42431___media_library_original_895_669.png","temp42431___media_library_original_749_560.png","temp42431___media_library_original_627_469.png","temp42431___media_library_original_524_392.png","temp42431___media_library_original_439_328.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEE4Z3NmMlkvR3Q5Q0pGMDJYQi8yVFg3RTh6b0xxZkpMRFRmUTZidzkreXo0a2ZjdDVwOHFrZjdOY2xUTTZYMldheHcwdXFEeEYreXg0a2oycmFhZkt4UDhBczBVODBwZmFZU3cwdWlPWnZ2Mll2R3RqQVpXMDJVcVA5azExTE02RGRybVR3MDEwUDEvMFhTYlh5Z0JiUmhSL3MxK1N5ays1OVNraWQ5TnRoZGxSYng4LzdOSlNkdHgyUTY5MDIxalpNVzhlVC9zMFJrMzFDdzIvMGF6a3NDR3RveUQvQUxJcEtjazl3c3JGRWVJNE5MUkZia2s0cldGTDJoTXBjcExjK0lMZUZmdEJPZStLVVljejVRY3JLNGorSUlMNkJaUWNBVTNEa2xZRks2dU1oOFNRMzl1OGE5VjRvcVV1VFVVWmN4Ly8yUT09Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":8445,"created_at":"2023-02-03T12:39:13.000000Z","updated_at":"2023-02-03T12:39:15.000000Z","conversions_disk":"public","uuid":"b7236bd7-cc54-487a-8561-5266ef7965e2","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8632\/temp42431.png","preview_url":""}],"author":{"id":9885,"name":"Vojislav","slug":"vojislav","bio":"vojislavd.com","avatar":"\/storage\/avatars\/08FshKjpg7ZTAVrkoXe1Ioer3Q3BhvGmaVcoBn9z.jpg","header":null,"created_at":"2022-11-26T14:39:21.000000Z","updated_at":"2022-11-26T15:35:42.000000Z"},"tags":[{"id":15,"name":{"en":"Alpinejs"},"description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","meta_description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","slug":{"en":"alpinejs"},"type":null,"order_column":1,"created_at":"2021-02-16T17:13:07.000000Z","updated_at":"2023-10-27T13:23:58.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":4191,"tag_id":15}},{"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":4191,"tag_id":4}},{"id":7,"name":{"en":"Pages"},"description":"Looking to get the work done faster? Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS. Get started or get inspired!","meta_description":"Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS","slug":{"en":"pages"},"type":null,"order_column":10,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:13:03.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":4191,"tag_id":7}},{"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":4191,"tag_id":53}}],"fork":null,"favorites":[{"id":9264,"name":"ivanromano","slug":"ivanromano","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/94951175?v=4","header":null,"created_at":"2022-10-04T20:31:49.000000Z","updated_at":"2022-10-04T20:31:49.000000Z","pivot":{"component_id":4191,"user_id":9264}},{"id":4755,"name":"Osalumense","slug":"osalumense","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43953425?v=4","header":null,"created_at":"2021-08-26T08:06:42.000000Z","updated_at":"2021-08-26T08:06:42.000000Z","pivot":{"component_id":4191,"user_id":4755}},{"id":5683,"name":"meringuekhalil","slug":"meringuekhalil","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/944567032695095296\/gU55PnS5_normal.jpg","header":null,"created_at":"2021-11-04T14:04:08.000000Z","updated_at":"2021-11-04T14:04:08.000000Z","pivot":{"component_id":4191,"user_id":5683}},{"id":9406,"name":"alexandermitsyk","slug":"alexandermitsyk","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/15364563?v=4","header":null,"created_at":"2022-10-17T11:33:48.000000Z","updated_at":"2022-10-17T11:33:48.000000Z","pivot":{"component_id":4191,"user_id":9406}},{"id":3866,"name":"devdeno","slug":"devdeno","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/51911254?v=4","header":null,"created_at":"2021-06-14T09:54:38.000000Z","updated_at":"2021-06-14T09:54:38.000000Z","pivot":{"component_id":4191,"user_id":3866}},{"id":3558,"name":"whoisthisstud","slug":"whoisthisstud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44807533?v=4","header":null,"created_at":"2021-05-25T15:23:04.000000Z","updated_at":"2021-05-25T15:23:04.000000Z","pivot":{"component_id":4191,"user_id":3558}},{"id":4393,"name":"kamkara","slug":"kamkara","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/72747066?v=4","header":null,"created_at":"2021-07-27T12:33:41.000000Z","updated_at":"2021-07-27T12:33:41.000000Z","pivot":{"component_id":4191,"user_id":4393}},{"id":9604,"name":"vnwefo802","slug":"vnwefo802","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/95290205?v=4","header":null,"created_at":"2022-11-03T01:48:46.000000Z","updated_at":"2022-11-03T01:48:46.000000Z","pivot":{"component_id":4191,"user_id":9604}},{"id":6940,"name":"123ApplePie","slug":"123applepie","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/73269263?v=4","header":null,"created_at":"2022-02-21T13:49:46.000000Z","updated_at":"2022-02-21T13:49:46.000000Z","pivot":{"component_id":4191,"user_id":6940}},{"id":11157,"name":"arpit-absyadav","slug":"arpit-absyadav","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/27771673?v=4","header":null,"created_at":"2023-02-23T14:47:41.000000Z","updated_at":"2023-02-23T14:47:41.000000Z","pivot":{"component_id":4191,"user_id":11157}},{"id":1863,"name":"EgoistDeveloper","slug":"egoistdeveloper","bio":"Converting HTML tailwind templates to SASS use this tool \ud83d\udc49 https:\/\/egoistdeveloper.github.io\/twcss-to-sass-playground \ud83c\udf89 see my all components at here https:\/\/github.com\/EgoistDeveloper\/my-tailwind-components","avatar":"https:\/\/avatars0.githubusercontent.com\/u\/17010054?v=4","header":null,"created_at":"2020-12-30T23:41:30.000000Z","updated_at":"2022-09-05T21:16:39.000000Z","pivot":{"component_id":4191,"user_id":1863}},{"id":11338,"name":"nfinzer","slug":"nfinzer","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/61382?v=4","header":null,"created_at":"2023-03-07T17:59:01.000000Z","updated_at":"2023-03-07T17:59:01.000000Z","pivot":{"component_id":4191,"user_id":11338}},{"id":12075,"name":"coffee377","slug":"coffee377","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/13707072?v=4","header":null,"created_at":"2023-04-26T01:42:51.000000Z","updated_at":"2023-04-26T01:42:51.000000Z","pivot":{"component_id":4191,"user_id":12075}},{"id":8280,"name":"NdekoCode","slug":"ndekocode","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85836702?v=4","header":"\/storage\/headers\/3FqzEebO3eZi51EIVGBz9z4Z9OfkfxfX63Dtgga5.png","created_at":"2022-06-28T15:31:22.000000Z","updated_at":"2023-09-08T17:49:11.000000Z","pivot":{"component_id":4191,"user_id":8280}},{"id":12175,"name":"lastofthedinosaurs","slug":"lastofthedinosaurs","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/91705770?v=4","header":null,"created_at":"2023-05-02T09:21:58.000000Z","updated_at":"2023-05-02T09:21:58.000000Z","pivot":{"component_id":4191,"user_id":12175}},{"id":12283,"name":"coolio-so","slug":"coolio-so","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/800017?v=4","header":null,"created_at":"2023-05-09T04:10:13.000000Z","updated_at":"2023-05-09T04:10:13.000000Z","pivot":{"component_id":4191,"user_id":12283}},{"id":12375,"name":"Sambhav242005","slug":"sambhav242005","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85670285?v=4","header":null,"created_at":"2023-05-16T04:50:40.000000Z","updated_at":"2023-05-16T04:50:40.000000Z","pivot":{"component_id":4191,"user_id":12375}},{"id":4536,"name":"paramjeet-dhiman","slug":"paramjeet-dhiman","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/86948618?v=4","header":null,"created_at":"2021-08-08T03:47:42.000000Z","updated_at":"2021-08-08T03:47:42.000000Z","pivot":{"component_id":4191,"user_id":4536}},{"id":12974,"name":"Will","slug":"will","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/b0c0410b8b9c0c1e2c68440cbcb85c38","header":null,"created_at":"2023-06-28T03:57:11.000000Z","updated_at":"2023-06-28T03:57:11.000000Z","pivot":{"component_id":4191,"user_id":12974}},{"id":14071,"name":"luca776","slug":"luca776","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/2599643?v=4","header":null,"created_at":"2023-09-09T13:57:14.000000Z","updated_at":"2023-09-09T13:57:14.000000Z","pivot":{"component_id":4191,"user_id":14071}},{"id":14420,"name":"Antonio Mora","slug":"antonio-mora","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/89d931b8cdc13538547d0aac2fa6f426","header":null,"created_at":"2023-09-29T13:46:30.000000Z","updated_at":"2023-09-29T13:46:30.000000Z","pivot":{"component_id":4191,"user_id":14420}},{"id":14748,"name":"chenzhen7","slug":"chenzhen7","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/109839704?v=4","header":null,"created_at":"2023-10-18T10:39:44.000000Z","updated_at":"2023-10-18T10:39:44.000000Z","pivot":{"component_id":4191,"user_id":14748}},{"id":14877,"name":"ThalitaCesar","slug":"thalitacesar","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/83131771?v=4","header":null,"created_at":"2023-10-25T13:11:28.000000Z","updated_at":"2023-10-25T13:11:28.000000Z","pivot":{"component_id":4191,"user_id":14877}},{"id":15202,"name":"CONSTANTlNE","slug":"constantlne","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/113200507?v=4","header":null,"created_at":"2023-11-11T21:09:37.000000Z","updated_at":"2023-11-11T21:09:37.000000Z","pivot":{"component_id":4191,"user_id":15202}},{"id":4237,"name":"erkobridee","slug":"erkobridee","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/342471?v=4","header":null,"created_at":"2021-07-14T06:40:38.000000Z","updated_at":"2021-07-14T06:40:38.000000Z","pivot":{"component_id":4191,"user_id":4237}},{"id":14122,"name":"Orhan F","slug":"orhan-f","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/84785cda98bcaeed6970a4ab37fdd805","header":null,"created_at":"2023-09-12T12:18:20.000000Z","updated_at":"2023-09-12T12:18:20.000000Z","pivot":{"component_id":4191,"user_id":14122}},{"id":15796,"name":"MargheritaBombi","slug":"margheritabombi","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/143595490?v=4","header":null,"created_at":"2023-12-13T08:38:31.000000Z","updated_at":"2023-12-13T08:38:31.000000Z","pivot":{"component_id":4191,"user_id":15796}},{"id":17700,"name":"Prateek Singh Chouhan","slug":"prateek-singh-chouhan","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/b166a385b825d0f879371314135dc0ba","header":null,"created_at":"2024-03-19T16:40:37.000000Z","updated_at":"2024-03-19T16:40:37.000000Z","pivot":{"component_id":4191,"user_id":17700}},{"id":18298,"name":"tejasmudekar","slug":"tejasmudekar","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/32029684?v=4","header":null,"created_at":"2024-04-18T14:07:53.000000Z","updated_at":"2024-04-18T14:07:53.000000Z","pivot":{"component_id":4191,"user_id":18298}},{"id":13484,"name":"developer-abdulali","slug":"developer-abdulali","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/103456792?v=4","header":null,"created_at":"2023-08-02T16:09:44.000000Z","updated_at":"2023-08-02T16:09:44.000000Z","pivot":{"component_id":4191,"user_id":13484}},{"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":4191,"user_id":19872}}]}" :edit="false"> Full screen Preview

Vojislav

19 components

Tailwind CSS & Alpine.js Pricing page

Community Rate

Related components