Credit / Debit Card Design (Number Hidden)

Credit/Debit Card Component in tailwind css

Share

/r/n \r\n <div class=\"w-full px-8 absolute top-8\">\r\n <div class=\"flex justify-between\">\r\n <div class=\"\">\r\n <p class=\"font-light\">\r\n Name\r\n <\/h1>\r\n <p class=\"font-bold tracking-widest font-mono\">\r\n Karthik P\r\n <\/p>\r\n <\/div>\r\n <img class=\"w-14\" src=https://www.creative-tim.com/"https:////upload.wikimedia.org//wikipedia//commons//thumb//2//2a//Mastercard-logo.svg//1000px-Mastercard-logo.svg.png/"//>/r/n <\/div>\r\n <div class=\"pt-1\">\r\n <p class=\"font-light\">\r\n Num.\r\n <\/h1>\r\n <p class=\"font-medium tracking-more-wider font-mono\">\r\n <strong>4642<\/strong> 3489 9867 <span class=\"bg-blue-700 rounded-full px-2 py-1 text-xs absolute\">\u25cf\u25cf\u25cf\u25cf<\/span>\r\n <\/p>\r\n \r\n <\/div>\r\n <div class=\"pt-6 pr-6\">\r\n <div class=\"flex justify-between\">\r\n \r\n <div class=\"\">\r\n <p class=\"font-light text-xs text-xs\">\r\n Expires At\r\n <\/h1>\r\n <p class=\"font-medium tracking-wider text-sm font-mono\">\r\n 03\/25\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"\">\r\n <p class=\"font-light text-xs\">\r\n CVC\r\n <\/h1>\r\n <p class=\"font-bold tracking-more-wider text-sm font-mono\">\r\n 123\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>","author_type":"App\\User","author_id":1890,"collection_id":null,"fork_id":1019,"votes":5,"score":"4.6","visits":5996,"popularity":359,"slug":"credit-debit-card-design-number-hidden","approved":1,"created_at":"2021-02-26T00:00:00.000000Z","updated_at":"2024-08-29T01:00:03.000000Z","downloads":53,"code_views":472,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":2571,"model_type":"App\\Component","model_id":1037,"collection_name":"preview","name":"temp30214","file_name":"temp30214.png","mime_type":"image\/png","disk":"public","size":7040,"manipulations":[],"custom_properties":{"generated_conversions":{"thumb":true,"ogimage":true}},"responsive_images":{"media_library_original":{"urls":["temp30214___media_library_original_1280_957.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU2l2VFBQQ2dBb0FLQUNnQW9BS0FDZ0FvQUtBQ2dBb0EvL1oiPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":2509,"created_at":"2021-02-26T06:43:29.000000Z","updated_at":"2021-02-26T06:43:30.000000Z","conversions_disk":"public","uuid":"cff9b1c2-2887-488b-a435-d9e3cfe19b38","generated_conversions":null,"original_url":"https:\/\/tailwindcomponents.com\/storage\/2571\/temp30214.png","preview_url":""}],"author":{"id":1890,"name":"papercore","slug":"papercore","bio":null,"avatar":"https:\/\/avatars0.githubusercontent.com\/u\/58584157?v=4","header":null,"created_at":"2021-01-05T07:36:05.000000Z","updated_at":"2021-03-30T12:55:11.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":1037,"tag_id":4}},{"id":5,"name":{"en":"Widget"},"description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","slug":{"en":"widget"},"type":null,"order_column":14,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:16:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":1037,"tag_id":5}},{"id":101,"name":{"en":"Number Input"},"description":"Utilize the numeric input component to assign numerical values within a form field, employing various styles, variants, and layouts adaptable for product pages, forms, and diverse interfaces.","meta_description":"Utilize the numeric input component to assign numerical values within a form field, employing various styles, variants, and layouts adaptable for product pages, forms, and diverse interfaces.","slug":{"en":"number-input"},"type":null,"order_column":90,"created_at":"2023-11-21T15:59:41.000000Z","updated_at":"2023-11-21T15:59:41.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":1037,"tag_id":101}}],"fork":{"id":1019,"name":"Credit \/ Debit Card","tailwind_version":"2.0.2","description":"Credit\/Debit Card Component in tailwind css","body":"<div class=\"bg-white min-h-screen flex justify-center items-center\">\r\n <div class=\"space-y-16\">\r\n <div class=\"w-96 h-56 m-auto bg-red-100 rounded-xl relative text-white shadow-2xl transition-transform transform hover:scale-110\">\r\n \r\n <img class=\"relative object-cover w-full h-full rounded-xl\" src=https://www.creative-tim.com/"https:////i.imgur.com//kGkSg1v.png/">/r/n \r\n <div class=\"w-full px-8 absolute top-8\">\r\n <div class=\"flex justify-between\">\r\n <div class=\"\">\r\n <p class=\"font-light\">\r\n Name\r\n <\/h1>\r\n <p class=\"font-medium tracking-widest\">\r\n Karthik P\r\n <\/p>\r\n <\/div>\r\n <img class=\"w-14 h-14\" src=https://www.creative-tim.com/"https:////i.imgur.com//bbPHJVe.png/"//>/r/n <\/div>\r\n <div class=\"pt-1\">\r\n <p class=\"font-light\">\r\n Card Number\r\n <\/h1>\r\n <p class=\"font-medium tracking-more-wider\">\r\n 4642 3489 9867 7632\r\n <\/p>\r\n <\/div>\r\n <div class=\"pt-6 pr-6\">\r\n <div class=\"flex justify-between\">\r\n <div class=\"\">\r\n <p class=\"font-light text-xs\">\r\n Valid\r\n <\/h1>\r\n <p class=\"font-medium tracking-wider text-sm\">\r\n 11\/15\r\n <\/p>\r\n <\/div>\r\n <div class=\"\">\r\n <p class=\"font-light text-xs text-xs\">\r\n Expiry\r\n <\/h1>\r\n <p class=\"font-medium tracking-wider text-sm\">\r\n 03\/25\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"\">\r\n <p class=\"font-light text-xs\">\r\n CVV\r\n <\/h1>\r\n <p class=\"font-bold tracking-more-wider text-sm\">\r\n \u00b7\u00b7\u00b7\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"w-96 h-56 m-auto bg-red-100 rounded-xl relative text-white shadow-2xl transition-transform transform hover:scale-110\">\r\n \r\n <img class=\"relative object-cover w-full h-full rounded-xl\" src=https://www.creative-tim.com/"https:////i.imgur.com//Zi6v09P.png/">/r/n \r\n <div class=\"w-full px-8 absolute top-8\">\r\n <div class=\"flex justify-between\">\r\n <div class=\"\">\r\n <p class=\"font-light\">\r\n Name\r\n <\/h1>\r\n <p class=\"font-medium tracking-widest\">\r\n Karthik P\r\n <\/p>\r\n <\/div>\r\n <img class=\"w-14 h-14\" src=https://www.creative-tim.com/"https:////i.imgur.com//bbPHJVe.png/"//>/r/n <\/div>\r\n <div class=\"pt-1\">\r\n <p class=\"font-light\">\r\n Card Number\r\n <\/h1>\r\n <p class=\"font-medium tracking-more-wider\">\r\n 4642 3489 9867 7632\r\n <\/p>\r\n <\/div>\r\n <div class=\"pt-6 pr-6\">\r\n <div class=\"flex justify-between\">\r\n <div class=\"\">\r\n <p class=\"font-light text-xs\">\r\n Valid\r\n <\/h1>\r\n <p class=\"font-medium tracking-wider text-sm\">\r\n 11\/15\r\n <\/p>\r\n <\/div>\r\n <div class=\"\">\r\n <p class=\"font-light text-xs text-xs\">\r\n Expiry\r\n <\/h1>\r\n <p class=\"font-medium tracking-wider text-sm\">\r\n 03\/25\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"\">\r\n <p class=\"font-light text-xs\">\r\n CVV\r\n <\/h1>\r\n <p class=\"font-bold tracking-more-wider text-sm\">\r\n \u00b7\u00b7\u00b7\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>","author_type":"App\\User","author_id":2353,"collection_id":null,"fork_id":null,"votes":15,"score":"4.7","visits":20243,"popularity":1814,"slug":"credit-debit-card","approved":1,"created_at":"2021-02-24T13:56:16.000000Z","updated_at":"2024-08-29T07:26:37.000000Z","downloads":311,"code_views":5503,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":2552,"model_type":"App\\Component","model_id":1019,"collection_name":"preview","name":"temp36116","file_name":"temp36116.png","mime_type":"image\/png","disk":"public","size":142613,"manipulations":[],"custom_properties":{"generated_conversions":{"thumb":true,"ogimage":true}},"responsive_images":{"media_library_original":{"urls":["temp36116___media_library_original_1280_957.png","temp36116___media_library_original_1070_799.png","temp36116___media_library_original_895_669.png","temp36116___media_library_original_749_559.png","temp36116___media_library_original_627_468.png","temp36116___media_library_original_524_391.png","temp36116___media_library_original_439_328.png","temp36116___media_library_original_367_274.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU1p6Z1pyMHp6emgvRW54ejByd1JmZlk3by9QWHVZWElxMk9oN1NCejFNYkNob3pWOE4vRTJ4OGNybTE3VnhZbkxhbUJkcGxReFVhNjkwNlJlbGNCc05rKzZhQVBuajR2K0ZOTzFQWHhOT3JGL2FzNWNaMXNtWHNZSStqd1hETU0waDdTVE9xK0RlazJ1bXF3dDFLL1dzNmZFYzg2ZDVvNWNka1VjcStGM1BYMTZWMEhqQ09NaWdEUHVQQWRocnIrZE9nTFY0T013Tkt2UG1tajZEQjVqV3cwT1dESnJmd25hYUIvd0FlNmhjMXZnOEpUb2ZBam54dU5xNG40MlcxNlY2NTQ1Ly8yUT09Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":2490,"created_at":"2021-02-24T13:56:21.000000Z","updated_at":"2021-02-24T13:56:23.000000Z","conversions_disk":"public","uuid":"27f61e78-dd8c-405f-9ce8-31e533c4c3e0","generated_conversions":null,"original_url":"https:\/\/tailwindcomponents.com\/storage\/2552\/temp36116.png","preview_url":""}],"author":{"id":2353,"name":"Karthik Ponnam","slug":"karthik-ponnam","bio":null,"avatar":"\/storage\/avatars\/YchyiKkI98P8pBRelzcytLXSKO4Zi6AGtZmIrWyD.png","header":null,"created_at":"2021-02-24T13:46:03.000000Z","updated_at":"2021-02-25T03:32:35.000000Z"}},"favorites":[{"id":3403,"name":"hebertcisco","slug":"hebertcisco","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/45374044?v=4","header":null,"created_at":"2021-05-12T02:40:23.000000Z","updated_at":"2021-05-12T02:40:23.000000Z","pivot":{"component_id":1037,"user_id":3403}},{"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":1037,"user_id":3558}},{"id":4440,"name":"daniborgs","slug":"daniborgs","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/247388?v=4","header":null,"created_at":"2021-07-31T01:22:06.000000Z","updated_at":"2021-07-31T01:22:06.000000Z","pivot":{"component_id":1037,"user_id":4440}},{"id":4124,"name":"Lino93","slug":"lino93","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/83257872?v=4","header":null,"created_at":"2021-07-05T01:53:30.000000Z","updated_at":"2021-07-05T01:53:30.000000Z","pivot":{"component_id":1037,"user_id":4124}},{"id":4823,"name":"shchf3","slug":"shchf3","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/51129901?v=4","header":null,"created_at":"2021-09-01T08:48:30.000000Z","updated_at":"2021-09-01T08:48:30.000000Z","pivot":{"component_id":1037,"user_id":4823}},{"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":1037,"user_id":4237}},{"id":3241,"name":"moneya","slug":"moneya","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7353773?v=4","header":null,"created_at":"2021-04-28T15:37:06.000000Z","updated_at":"2021-04-28T15:37:06.000000Z","pivot":{"component_id":1037,"user_id":3241}},{"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":1037,"user_id":9406}},{"id":11730,"name":"erik hernandez","slug":"erik-hernandez","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/a0d301f1e6c90d26709b53ea90611e67","header":null,"created_at":"2023-04-02T03:47:02.000000Z","updated_at":"2023-04-02T03:47:02.000000Z","pivot":{"component_id":1037,"user_id":11730}},{"id":12321,"name":"Arun Kumar","slug":"arun-kumar","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/e645688c8afb052a14811b90242a47a9","header":null,"created_at":"2023-05-11T19:57:25.000000Z","updated_at":"2023-05-11T19:58:46.000000Z","pivot":{"component_id":1037,"user_id":12321}},{"id":9618,"name":"Maurilozz","slug":"maurilozz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/90498804?v=4","header":null,"created_at":"2022-11-04T01:09:42.000000Z","updated_at":"2022-11-04T01:09:42.000000Z","pivot":{"component_id":1037,"user_id":9618}}]}" :edit="false"> Full screen Preview

papercore

7 components Profile On

Credit / Debit Card Design (Number Hidden)

Community Rate

Related components