[email protected]

Tailwind CSS Login Page

By 123ApplePie

Responsive login page

Share

/r/n <link href=https://www.creative-tim.com/"https:////fonts.bunny.net//css?family=figtree:400,500,600&display=swap\%22 rel=\"stylesheet\" \/>\r\n <link href=https://www.creative-tim.com/twcomponents/component/'https:////unpkg.com//boxicons@2.1.4//css//boxicons.min.css' rel='stylesheet'>\r\n <script src=https://www.creative-tim.com/"https:////cdn.tailwindcss.com/">/r/n/r/n <\/head>\r\n <body>\r\n <div class=\"font-sans text-gray-900 antialiased\">\r\n <div class=\"min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-[#f8f4f3]\">\r\n <div>\r\n <a href=https://www.creative-tim.com/"///">/r/n <h2 class=\"font-bold text-3xl\">LOREM <span class=\"bg-[#f84525] text-white px-2 rounded-md\">IPSUM<\/span><\/h2>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg\">\r\n <form method=\"POST\" action=https://www.creative-tim.com/"{{ route('login') }}\">\r\n\r\n <div class=\"py-8\">\r\n <center>\r\n <span class=\"text-2xl font-semibold\">Log In<\/span>\r\n <\/center>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block font-medium text-sm text-gray-700\" for=\"email\" value=\"Email\" \/>\r\n <input type='email' \r\n name='email'\r\n placeholder='Email'\r\n class=\"w-full rounded-md py-2.5 px-4 border text-sm outline-[#f84525]\" \/> \r\n <\/div>\r\n\r\n\r\n <div class=\"mt-4\">\r\n <label class=\"block font-medium text-sm text-gray-700\" for=\"password\" value=\"Password\" \/>\r\n <div class=\"relative\">\r\n <input id=\"password\" type=\"password\" name=\"password\" placeholder=\"Password\" required autocomplete=\"current-password\" class = 'w-full rounded-md py-2.5 px-4 border text-sm outline-[#f84525]'>\r\n\r\n <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5\">\r\n <button type=\"button\" id=\"togglePassword\" class=\"text-gray-500 focus:outline-none focus:text-gray-600 hover:text-gray-600\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6\" viewBox=\"0 0 24 24\" style=\"fill: rgba(0, 0, 0, 1);transform: ;msFilter:;\"><path d=\"M12 4.998c-1.836 0-3.356.389-4.617.971L3.707 2.293 2.293 3.707l3.315 3.316c-2.613 1.952-3.543 4.618-3.557 4.66l-.105.316.105.316C2.073 12.382 4.367 19 12 19c1.835 0 3.354-.389 4.615-.971l3.678 3.678 1.414-1.414-3.317-3.317c2.614-1.952 3.545-4.618 3.559-4.66l.105-.316-.105-.316c-.022-.068-2.316-6.686-9.949-6.686zM4.074 12c.103-.236.274-.586.521-.989l5.867 5.867C6.249 16.23 4.523 13.035 4.074 12zm9.247 4.907-7.48-7.481a8.138 8.138 0 0 1 1.188-.982l8.055 8.054a8.835 8.835 0 0 1-1.763.409zm3.648-1.352-1.541-1.541c.354-.596.572-1.28.572-2.015 0-.474-.099-.924-.255-1.349A.983.983 0 0 1 15 11a1 1 0 0 1-1-1c0-.439.288-.802.682-.936A3.97 3.97 0 0 0 12 7.999c-.735 0-1.419.218-2.015.572l-1.07-1.07A9.292 9.292 0 0 1 12 6.998c5.351 0 7.425 3.847 7.926 5a8.573 8.573 0 0 1-2.957 3.557z\"><\/path><\/svg> \r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"block mt-4\">\r\n <label for=\"remember_me\" class=\"flex items-center\">\r\n <input type=\"checkbox\" id=\"remember_me\" name=\"remember\" class = 'rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500']) !!}>\r\n <span class=\"ms-2 text-sm text-gray-600\">Remember Me<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"flex items-center justify-end mt-4\">\r\n <a class=\"hover:underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\" href=https://www.creative-tim.com/"{{ route('password.request') }}\">\r\n Forgot your password?\r\n <\/a>\r\n\r\n <button class = 'ms-4 inline-flex items-center px-4 py-2 bg-[#f84525] border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-800 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150']) }}>\r\n Sign In\r\n <\/button>\r\n\r\n <\/div>\r\n \r\n <\/form> \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const passwordInput = document.getElementById('password');\r\n const togglePasswordButton = document.getElementById('togglePassword');\r\n\r\n togglePasswordButton.addEventListener('click', () => {\r\n const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';\r\n passwordInput.setAttribute('type', type);\r\n });\r\n <\/script> \r\n\r\n <\/body>\r\n<\/html>","author_type":"App\\User","author_id":6940,"collection_id":null,"fork_id":null,"votes":2,"score":"5.0","visits":8253,"popularity":699,"slug":"login-page-20","approved":1,"created_at":"2024-02-12T00:00:00.000000Z","updated_at":"2025-06-18T07:37:17.000000Z","downloads":223,"code_views":3288,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11465,"model_type":"App\\Component","model_id":6243,"collection_name":"preview","name":"temp19799","file_name":"temp19799.png","mime_type":"image\/png","disk":"public","size":24836,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp19799___media_library_original_1280_957.png","temp19799___media_library_original_1070_800.png","temp19799___media_library_original_895_669.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvVGlvTlNHV2NRcmx1bEEwcmhEY0NjWlU4VWs3bHVManVUVXpNS0FFS0xLcFZobXFzUmQzSWxraGhieWs0YW8wVHNqYTA1TG1aTU9hWkFVQUI2VUFRL1psOHpmajVxbmwxdWFjN3RZbUhTcUlQLy9aIj4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":2,"created_at":"2024-02-12T16:22:02.000000Z","updated_at":"2024-02-12T16:22:03.000000Z","conversions_disk":"public","uuid":"70afc5c3-d6bf-41e1-a5df-d0a8123894a6","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11465\/temp19799.png","preview_url":""}],"author":{"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"},"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":6243,"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":6243,"tag_id":7}}],"fork":null,"favorites":[{"id":17146,"name":"Vokirok","slug":"vokirok","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/49db19e61cecef771680f5d0a712b952","header":null,"created_at":"2024-02-24T01:00:35.000000Z","updated_at":"2024-02-24T01:00:35.000000Z","pivot":{"component_id":6243,"user_id":17146}}]}" :edit="false"> Full screen Preview

123ApplePie

2 components Profile On

Tailwind CSS Login Page

Community Rate

Related components