Tailwind CSS toggle

"="" \="" >\r\n="" \r\n="" <label="" for="\"toggle-example\"" items-center="" cursor-pointer="" relative="" mb-4\">\r\n="" <input="" type="\"checkbox\"" id="\"toggle-example\"" <div="" bg-gray-200="" border-2="" border-gray-200="" h-6="" w-11="" rounded-full\"><\="" div>\r\n="" <span="" text-gray-900="" text-sm="" font-medium\">toggle="" me<\="" span>\r\n="" <\="" label>\r\n\r\n="" relative\">\r\n="" checked="\"\">\r\n" me="" (checked)<\="" <p="" toggle\="" switch="" element="" is="" part="" of="" a="" larger,="" open-source="" library="" tailwind="" components.="" learn="" more="" by="" going="" to="" the="" official="" <a="" hover:underline\"="" href="https://www.creative-tim.com/"#\"" target="\"_blank\">Flowbite" documentation<\="" a>.<\="" p>\r\n<\="" div>\r\n\r\n<script="" src="\"https:\/\/unpkg.com\/@themesberg\/flowbite@1.1.0\/dist\/flowbite.bundle.js\"><\/script>","author_type":"App\\User","author_id":5267,"collection_id":null,"fork_id":null,"votes":3,"score":"3.7","visits":10306,"popularity":429,"slug":"tailwind-css-toggle","approved":1,"created_at":"2021-11-06T00:00:00.000000Z","updated_at":"2024-09-19T01:09:59.000000Z","downloads":116,"code_views":4621,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":7144,"model_type":"App\\Component","model_id":2572,"collection_name":"preview","name":"temp17536","file_name":"temp17536.png","mime_type":"image\/png","disk":"public","size":60441,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp17536___media_library_original_1280_957.png","temp17536___media_library_original_1070_799.png","temp17536___media_library_original_895_669.png","temp17536___media_library_original_749_559.png","temp17536___media_library_original_627_468.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUVRWaE45b3lvTExYcmN5dFk4NUxVWkRlWEVPQUl6aW9HV3hxYzUvNVpHcTVSWEwxcGNTU2pMTGlwR1dqQXJkUURRQW4yZFBRVUFMNUMrZ291S3dvakM5S0JqNkFDZ0FvQUtBUC8vWiI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":6996,"created_at":"2022-07-08T09:27:28.000000Z","updated_at":"2022-07-08T09:27:30.000000Z","conversions_disk":"public","uuid":"0028419c-6da8-4617-9907-d350de101148","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/7144\/temp17536.png","preview_url":""}],"author":{"id":5267,"name":"zoltanszogyenyi","slug":"zoltanszogyenyi","bio":"Co-founder" and="" ceo="" at="" themesberg.="" contributor="" open="" source.="" indie="" hacker,="" web="" developer,="" an="" authentic="" optimist.\r\n\r\nhttps:\="" flowbite.com\r\nhttps:\="" themesberg.com\r\nhttps:\="" ui.glass","avatar":"\="" storage\="" avatars\="" hvdqtaschljqzhxzu4fksqia6vymkwdv1iscc0vd.jpg","header":null,"created_at":"2021-10-02t09:10:44.000000z","updated_at":"2021-10-15t15:57:46.000000z"},"tags":[{"id":1,"name":{"en":"buttons"},"description":"choose="" from="" our="" large="" collection="" ready-to-use="" buttons="" based="" on="" most="" popular="" utility-first="" framework.","meta_description":"choose="" framework.","slug":{"en":"buttons"},"type":null,"order_column":2,"created_at":"2019-07-04t08:20:17.000000z","updated_at":"2022-08-01t16:05:44.000000z","pivot":{"taggable_type":"app\\component","taggable_id":2572,"tag_id":1}},{"id":5,"name":{"en":"widget"},"description":"check="" out="" 500+="" widget="" examples.="" use="" snippets="" preview="" code="" spend="" less="" time="" re-inventing="" wheel.","meta_description":"check="" 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":2572,"tag_id":5}},{"id":52,"name":{"en":"switch"},"description":"the="" component="" enhances="" user="" interaction="" allowing="" them="" toggle="" between="" two="" states.="" take="" look="" components="" that="" you="" can="" seamlessly="" integrate="" into="" your="" project.","meta_description":"take="" project.","slug":{"en":"switch"},"type":null,"order_column":41,"created_at":"2023-07-17t12:39:18.000000z","updated_at":"2023-07-19t07:25:07.000000z","pivot":{"taggable_type":"app\\component","taggable_id":2572,"tag_id":52}},{"id":93,"name":{"en":"toggle"},"description":"the="" allows="" users="" select="" simple="" \"yes\"="" or="" \"no\"="" response="" choosing="" available="" options.="" it="" comes="" in="" various="" sizes,="" styles,="" colors,="" crafted="" using="" utility="" classes="" supports="" dark="" mode.","meta_description":"the="" mode.","slug":{"en":"toggle"},"type":null,"order_column":82,"created_at":"2023-11-15t15:22:49.000000z","updated_at":"2023-11-15t15:22:49.000000z","pivot":{"taggable_type":"app\\component","taggable_id":2572,"tag_id":93}}],"fork":null,"favorites":[{"id":5267,"name":"zoltanszogyenyi","slug":"zoltanszogyenyi","bio":"co-founder="" hvdqtaschljqzhxzu4fksqia6vymkwdv1iscc0vd.jpg","header":null,"created_at":"2021-10-02t09:10:44.000000z","updated_at":"2021-10-15t15:57:46.000000z","pivot":{"component_id":2572,"user_id":5267}},{"id":6917,"name":"rizqisyahrendra","slug":"rizqisyahrendra","bio":null,"avatar":"https:\="" avatars.githubusercontent.com\="" u\="" 19841840?v="4","header":null,"created_at":"2022-02-19T12:10:03.000000Z","updated_at":"2022-02-19T12:10:03.000000Z","pivot":{"component_id":2572,"user_id":6917}},{"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":2572,"user_id":3241}},{"id":7814,"name":"Syahiruddin","slug":"syahiruddin","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/f63aed1ca626506160d79b077b89b024","header":null,"created_at":"2022-05-11T06:57:00.000000Z","updated_at":"2022-05-11T06:57:00.000000Z","pivot":{"component_id":2572,"user_id":7814}},{"id":11664,"name":"Lipdk","slug":"lipdk","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/1819100?v=4","header":null,"created_at":"2023-03-29T02:29:41.000000Z","updated_at":"2023-03-29T02:29:41.000000Z","pivot":{"component_id":2572,"user_id":11664}}]}"" :edit="false"> Full screen Preview

Download