Card Login

Card login with social icons made using Tailwind CSS

/r/n/r/n/r/n/r/n

Github/r/n <button class=\"bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150\" type=\"button\">\r\n <img alt=\"...\" class=\"w-5 mr-1\" src=https://www.creative-tim.com/"https:////demos.creative-tim.com//notus-js//assets//img//google.svg/">Google <\/button>\r\n\r\n <\/div>\r\n <hr class=\"mt-6 border-b-1 border-blueGray-300\">\r\n <\/div>\r\n <div class=\"flex-auto px-4 lg:px-10 py-10 pt-0\">\r\n <div class=\"text-blueGray-400 text-center mb-3 font-bold\">\r\n <small>Or sign in with credentials<\/small>\r\n <\/div>\r\n <form>\r\n <div class=\"relative w-full mb-3\">\r\n <label class=\"block uppercase text-blueGray-600 text-xs font-bold mb-2\" for=\"grid-password\">Email<\/label><input type=\"email\" class=\"border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150\" placeholder=\"Email\">\r\n <\/div>\r\n <div class=\"relative w-full mb-3\">\r\n <label class=\"block uppercase text-blueGray-600 text-xs font-bold mb-2\" for=\"grid-password\">Password<\/label><input type=\"password\" class=\"border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150\" placeholder=\"Password\">\r\n <\/div>\r\n <div>\r\n <label class=\"inline-flex items-center cursor-pointer\"><input id=\"customCheckLogin\" type=\"checkbox\" class=\"form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150\"><span class=\"ml-2 text-sm font-semibold text-blueGray-600\">Remember me<\/span><\/label>\r\n <\/div>\r\n <div class=\"text-center mt-6\">\r\n <button class=\"bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150\" type=\"button\"> Sign In <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <footer class=\"relative pt-8 pb-6 mt-2\">\r\n <div class=\"container mx-auto px-2\">\r\n <div class=\"flex flex-wrap items-center md:justify-between justify-center\">\r\n <div class=\"w-full md:w-6\/12 px-4 mx-auto text-center\">\r\n <div class=\"text-sm text-blueGray-500 font-semibold py-1\">\r\n Made with <a href=https://www.creative-tim.com/"https:////www.creative-tim.com//product//notus-js/" class=\"text-blueGray-500 hover:text-gray-800\" target=\"_blank\">Notus JS<\/a> by <a href=https://www.creative-tim.com/"https:////www.creative-tim.com/" class=\"text-blueGray-500 hover:text-blueGray-800\" target=\"_blank\"> Creative Tim<\/a>.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n<\/section>","author_type":"App\\User","author_id":5062,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":8549,"popularity":399,"slug":"card-login","approved":1,"created_at":"2021-09-22T09:14:24.000000Z","updated_at":"2024-08-29T05:50:23.000000Z","downloads":128,"code_views":2188,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":4884,"model_type":"App\\Component","model_id":2310,"collection_name":"preview","name":"temp74154","file_name":"temp74154.png","mime_type":"image\/png","disk":"public","size":30606,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp74154___media_library_original_1280_957.png","temp74154___media_library_original_1070_799.png","temp74154___media_library_original_895_669.png","temp74154___media_library_original_749_559.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvVUZ1bFdaSE82cStaOGJ3djFyVkNaUHBHUTMzZzMwcFNCRzRPbFpqSzV1Vkk2MXB5TW5tUnhIakR3M2Q2ek9yMnQyMEk5QWF1S2FKYlJkOEhhTmM2TkdSZFhKbUo5YVVrMk5OSFZmYWw5YW5rWStaR2JYV2N3VVdBS0xBRk1ELzJRPT0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":4780,"created_at":"2021-09-22T10:03:37.000000Z","updated_at":"2021-09-22T10:03:38.000000Z","conversions_disk":"public","uuid":"b8d9e257-98bc-4089-808e-c0e54148dd36","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/4884\/temp74154.png","preview_url":""}],"author":{"id":5062,"name":"Creative Tim","slug":"creative-tim","bio":"Fully Coded UI Tools to create web and mobile apps.\r\n\r\nwww.creative-tim.com","avatar":"\/storage\/avatars\/TpXC86kLAsEjEFhN5zBp9Q8a8mzO4aigKXwfc5zm.jpg","header":null,"created_at":"2021-09-15T11:57:57.000000Z","updated_at":"2024-07-23T12:36:04.000000Z"},"tags":[{"id":9,"name":{"en":"Logins"},"description":"Improve your authentication process with these examples of Login components and pages. They are ready-to-use directly in your Tailwind CSS project.","meta_description":"Improve your authentication process with these examples of Login components and pages. They are ready-to-use directly in your Tailwind CSS project.","slug":{"en":"logins"},"type":null,"order_column":7,"created_at":"2020-09-29T11:19:46.000000Z","updated_at":"2022-08-01T16:22:17.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2310,"tag_id":9}},{"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":2310,"tag_id":7}}],"fork":null,"favorites":[{"id":3038,"name":"lohnsonok","slug":"lohnsonok","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/60504466?v=4","header":null,"created_at":"2021-04-11T20:40:20.000000Z","updated_at":"2021-04-11T20:40:20.000000Z","pivot":{"component_id":2310,"user_id":3038}},{"id":5441,"name":"ThannhNhut","slug":"thannhnhut","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/70879168?v=4","header":null,"created_at":"2021-10-15T06:37:17.000000Z","updated_at":"2021-10-15T06:37:17.000000Z","pivot":{"component_id":2310,"user_id":5441}},{"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":2310,"user_id":5683}},{"id":5854,"name":"Thomas Garp","slug":"thomas-garp","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/a94624bc5c13722490c724ac7a423997","header":null,"created_at":"2021-11-20T16:35:06.000000Z","updated_at":"2021-11-20T16:35:06.000000Z","pivot":{"component_id":2310,"user_id":5854}},{"id":6148,"name":"nejdetkadir","slug":"nejdetkadir","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/50639655?v=4","header":null,"created_at":"2021-12-14T00:31:20.000000Z","updated_at":"2021-12-14T00:31:20.000000Z","pivot":{"component_id":2310,"user_id":6148}},{"id":6667,"name":"DevBobi","slug":"devbobi","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/86476706?v=4","header":null,"created_at":"2022-01-26T00:20:24.000000Z","updated_at":"2022-01-26T00:20:24.000000Z","pivot":{"component_id":2310,"user_id":6667}},{"id":8028,"name":"khan188993","slug":"khan188993","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/58082952?v=4","header":null,"created_at":"2022-06-01T11:00:03.000000Z","updated_at":"2022-06-01T11:00:03.000000Z","pivot":{"component_id":2310,"user_id":8028}},{"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":2310,"user_id":8280}},{"id":5663,"name":"Lostovayne","slug":"lostovayne","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/92962731?v=4","header":null,"created_at":"2021-11-03T01:56:20.000000Z","updated_at":"2021-11-03T01:56:20.000000Z","pivot":{"component_id":2310,"user_id":5663}},{"id":8992,"name":"EzekelRAGE","slug":"ezekelrage","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/90939858?v=4","header":null,"created_at":"2022-09-08T19:00:09.000000Z","updated_at":"2022-09-08T19:00:50.000000Z","pivot":{"component_id":2310,"user_id":8992}},{"id":11064,"name":"dingiswayochapomba","slug":"dingiswayochapomba","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44392909?v=4","header":null,"created_at":"2023-02-19T09:50:49.000000Z","updated_at":"2023-02-19T09:50:49.000000Z","pivot":{"component_id":2310,"user_id":11064}},{"id":10082,"name":"thats_robbie","slug":"thats-robbie","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1582419208813645824\/MmopzdB2_normal.jpg","header":null,"created_at":"2022-12-12T23:51:48.000000Z","updated_at":"2022-12-12T23:51:48.000000Z","pivot":{"component_id":2310,"user_id":10082}},{"id":13658,"name":"ismwzz","slug":"ismwzz","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/01f250fe35c98b7f49e0760edf5be2ae","header":null,"created_at":"2023-08-14T20:02:59.000000Z","updated_at":"2023-08-14T20:02:59.000000Z","pivot":{"component_id":2310,"user_id":13658}},{"id":16555,"name":"abrahamponcea","slug":"abrahamponcea","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/83612691?v=4","header":null,"created_at":"2024-01-26T00:18:30.000000Z","updated_at":"2024-01-26T00:18:30.000000Z","pivot":{"component_id":2310,"user_id":16555}}]}" :edit="false"> Full screen Preview