Tailwind CSS & Alpine.js Show / Hide Password

Show / Hide password made using Tailwind CSS & Alpine.js

/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 class=\"flex flex-col\">\r\n <label for=\"input_show_hide_password\">Show \/ Hide Password<\/label>\r\n <div x-data=\"{ show: false }\" class=\"relative flex items-center mt-2\">\r\n <input :type=\" show ? 'text': 'password' \" name=\"input_show_hide_password\" id=\"input_show_hide_password\" class=\"flex-1 p-2 pr-10 border border-gray-300 focus:outline-none focus:ring-0 focus:border-gray-300\" value=\"password\" type=\"password\">\r\n <button type=\"button\" class=\"absolute right-2 bg-transparent flex items-center justify-center hover:text-blue-600\" @click=\"show = !show\">\r\n <svg x-show=\"!show\" class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21\"><\/path><\/svg>\r\n\r\n <svg x-show=\"show\" class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display: none;\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"><\/path><\/svg>\r\n <\/button>\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":3,"score":"5.0","visits":5672,"popularity":300,"slug":"tailwind-css-alpinejs-show-hide-password","approved":1,"created_at":"2022-11-26T16:16:17.000000Z","updated_at":"2024-09-19T02:37:51.000000Z","downloads":45,"code_views":941,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":8669,"model_type":"App\\Component","model_id":4192,"collection_name":"preview","name":"temp49772","file_name":"temp49772.png","mime_type":"image\/png","disk":"public","size":7040,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp49772___media_library_original_1280_957.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU2l2VFBQQ2dBb0FLQUNnQW9BS0FDZ0FvQUtBQ2dBb0EvL1oiPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":8482,"created_at":"2023-02-03T13:19:15.000000Z","updated_at":"2023-02-03T13:19:19.000000Z","conversions_disk":"public","uuid":"50100c99-6bb3-4793-ba3c-2abbfe7bdb34","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8669\/temp49772.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":4192,"tag_id":15}},{"id":2,"name":{"en":"Forms"},"description":"Get started with our 100+ forms examples that are ready to be used in your Tailwind project. From Sign up, Sign in, to subscribe forms we got anything you need.","meta_description":"Get started with our 100+ forms examples that are ready to be used in your Tailwind project. From Sign up, Sign in, to subscribe forms we got anything you need.","slug":{"en":"forms"},"type":null,"order_column":5,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:08:37.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":4192,"tag_id":2}},{"id":12,"name":{"en":"Inputs"},"description":"Find your inspiration with our collection of free input examples. Copy and paste them into your app and spend less time on coding.","meta_description":"Find your inspiration with our collection of free input examples. Copy and paste them into your app and spend less time on coding.","slug":{"en":"inputs"},"type":null,"order_column":6,"created_at":"2020-09-29T11:58:52.000000Z","updated_at":"2022-08-01T16:21:48.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":4192,"tag_id":12}},{"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":4192,"tag_id":5}}],"fork":null,"favorites":[{"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":4192,"user_id":9406}},{"id":9842,"name":"tonybastienricher","slug":"tonybastienricher-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/51478222?v=4","header":null,"created_at":"2022-11-23T14:49:07.000000Z","updated_at":"2022-11-23T14:49:07.000000Z","pivot":{"component_id":4192,"user_id":9842}},{"id":10697,"name":"dedo-developer","slug":"dedo-developer","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/3310387?v=4","header":null,"created_at":"2023-01-25T17:31:12.000000Z","updated_at":"2023-01-25T17:31:12.000000Z","pivot":{"component_id":4192,"user_id":10697}},{"id":11390,"name":"Jorge_Alexis","slug":"jorge-alexis","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1634409796924239875\/BuCpQ9hZ_normal.png","header":null,"created_at":"2023-03-11T04:29:21.000000Z","updated_at":"2023-03-11T04:32:10.000000Z","pivot":{"component_id":4192,"user_id":11390}},{"id":11511,"name":"claymore07","slug":"claymore07","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/17278941?v=4","header":null,"created_at":"2023-03-19T14:04:21.000000Z","updated_at":"2023-03-19T14:04:21.000000Z","pivot":{"component_id":4192,"user_id":11511}},{"id":12538,"name":"queued","slug":"queued","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/1345234?v=4","header":null,"created_at":"2023-05-26T13:53:32.000000Z","updated_at":"2023-05-26T13:53:32.000000Z","pivot":{"component_id":4192,"user_id":12538}},{"id":12275,"name":"Katoemma","slug":"katoemma","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/103442484?v=4","header":null,"created_at":"2023-05-08T15:54:07.000000Z","updated_at":"2023-05-08T15:54:07.000000Z","pivot":{"component_id":4192,"user_id":12275}},{"id":12901,"name":"FarahTrip","slug":"farahtrip","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/121116598?v=4","header":null,"created_at":"2023-06-23T21:24:05.000000Z","updated_at":"2023-06-23T21:24:05.000000Z","pivot":{"component_id":4192,"user_id":12901}},{"id":15204,"name":"guidodf98","slug":"guidodf98","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/70726903?v=4","header":null,"created_at":"2023-11-12T04:11:15.000000Z","updated_at":"2023-11-12T04:11:15.000000Z","pivot":{"component_id":4192,"user_id":15204}},{"id":18378,"name":"zakialawi_","slug":"zakialawi","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1731752978980478978\/43w2e3K8_normal.jpg","header":null,"created_at":"2024-04-22T11:08:10.000000Z","updated_at":"2024-04-22T11:08:10.000000Z","pivot":{"component_id":4192,"user_id":18378}}]}" :edit="false"> Full screen Preview

Vojislav

19 components

Community Rate

Related components

See more components