Tailwind CSS Animated Toggle

"="" integrity="\"sha512-6m6AtgVSg7JzStQBuIpqoVuGPVSAK5Sp\/ti6ySu6AjRDa1pX8mIl1TwP9QmKXU+4Mhq\/73SzOk6mbNvyj9MPzQ==\"" crossorigin="\"anonymous\"" referrerpolicy="\"no-referrer\"><\/script>\r\n\r\n" max-w-sm="" flex="" flex-col="" mx-auto="" text-center\">\r\n="" <div="" x-data="\"{" selected:="" true="" }\"="" rounded="" bg-white="" h-auto="" m-auto="" shadow="" p-8="" pt-6="" rounded-xl\">\r\n\r\n="" <h1="" font-bold\">alpinejs="" animated="" toggle<\="" h1>\r\n\r\n="" w-full="" mt-4="" rounded-md="" border="" h-10="" p-1="" bg-gray-200\">\r\n="" h-full="" items-center\">\r\n="" @click="\"selected=!selected\"" justify-center="" text-gray-400="" cursor-pointer\">\r\n="" <button>u="" no="" like="" me?<\="" button>\r\n="" <\="" div>\r\n="" <button>no="" choose="" me<\="" div>\r\n\r\n="" \r\n="" <span="" :class="\"{" 'left-1\="" 2="" -ml-1="" text-gray-800':!selected,="" 'left-1="" text-indigo-600="" font-semibold':selected="" }\"\r\n="" x-text="\"selected" ?="" 'i\\'m="" selected'="" :="" '\\'cause="" i\\'m="" better!'\"\r\n="" text-sm="" items-center="" w-1\="" h-[1.88rem]="" transition-all="" duration-150="" ease-linear="" top-[4px]="" absolute\"><\="" span>\r\n="" div>\r\n\r\n\r\n="" text-gray-700\">like="" this="" component?="" give="" it="" a="" like!<\="" div>\r\n<\="" div>","author_type":"app\\user","author_id":3558,"collection_id":null,"fork_id":null,"votes":10,"score":"5.0","visits":8892,"popularity":625,"slug":"alpinejs-animated-toggle","approved":1,"created_at":"2022-10-06t00:00:00.000000z","updated_at":"2024-11-13t12:55:04.000000z","downloads":75,"code_views":2380,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\="" \="" cdn.tailwindcss.com","should_tweet":1,"media":[{"id":7849,"model_type":"app\\component","model_id":3915,"collection_name":"preview","name":"temp14776","file_name":"temp14776.png","mime_type":"image\="" png","disk":"public","size":44789,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp14776___media_library_original_1280_957.png","temp14776___media_library_original_1070_799.png","temp14776___media_library_original_895_669.png","temp14776___media_library_original_749_559.png","temp14776___media_library_original_627_468.png"],"base64svg":"data:image\="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagmti4mca5ntcipgojpgltywdlihdpzhropsixmjgwiibozwlnahq9ijk1nyigegxpbms6ahjlzj0izgf0ytppbwfnzs9qcgvno2jhc2u2ncwvowovnefbuvnrwkpsz0fcqvffqvlbqmdbquqvl2dbn1exskzrvljqvwpvz1oyuxrhbkjswnlcmk1tnhdjq2gxyzjsdvp5qkpta2nnu2xcrlj5qjjprefwtencegrxrnnhwfi1suqwz09uqusvoxnbuxdbrefnsurbz0leqxdnrejbturcqvvjqlfvrujbvutcd2nhq0f3s0rbd0xdz3nmrfe0u0vbme9futrmq3hbv0vcrvrgqlvwrlf3uez4z1dgqmdtrkjvvs85c0frd0veqkfrrkjbvupcuvvkrkewtersuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvlzhbquvrz0fgd0fmqxdfukfbsvjbuu1sqwyvrufcoefbquvgqvffqkfrrujbqufbqufbqufbqujbz01fqlfzsenba0tdly9fquxvuufbsujbd01dqkfnrkjruuvbqufczlffq0f3quvfuvvtsvrgqkjotljzuwnpy1jrewdar2hdq05dc2nfvlv0shdkre5py29jsknowvhhqmthslnzbktda3forfuytnpnnu9rtkvsvvpiu0vss1uxulzwbgrzv1zwalphvm1ammhwyw5omgrywjnlsgw2zzrtrmhvzulpwxftazvtvmxwzvltwnfpbzztbhbxzw9xyxf5czdtmxryztr1ynjddzhurnhzzkl5y3jtmdluvjf0zlkyzhjonhvqazvlym42t25xogzmejlqwdi5l2o1k3yvrufcoejbqu1cqvffqkfrrujbuuvbqufbqufbqujbz01fqlfzsenba0tdly9fquxvukfbsujbz1ffqxdrsejruuvbquvdzhdbqkfntvjcqvvotvfzu1fwruhzwevuswplqkncuknryud4d1frak0xthdgv0p5mffvv0pevghkzkvyr0jryuppy29lu28xtmpjne9ucersrvzhujboslnstlvwvlpyv0zsyvkyumxabwrvyvdwemrivjjkm2g1zw9lrghjv0donglkaxblvgxkv1dsnwlabxflanblv21wnmlwcxjlenrmvzj0n2k1dxnmrhhnwed4ogpkexrmvdfowfcxowpamnvmajvpwg01k2pwnnzmejlqwdi5l2o1k3yvyufbd0rbuufdrvfnukfeoeevvfn6bdh1rnzxdw1vcnn3cddgy3ptrmp6vmfkr3r5rmjxzfpsm0zrmmhyte4ztvprvw5yvjbqr29wrzm0d3b4v3ptwmltmfjht1vuahpsew9mtxhra245nmx5b09aa29mwxdubxftc0p1ncttsutbq2dbb0evl1oipgojpc9pbwfnzt4kpc9zdmc+"}},"order_column":7683,"created_at":"2022-10-06t18:03:33.000000z","updated_at":"2022-10-06t18:03:35.000000z","conversions_disk":"public","uuid":"ecf3a300-3f32-4b64-8bae-4b6a0297d6bf","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\="" tailwindcomponents.com\="" storage\="" 7849\="" temp14776.png","preview_url":""}],"author":{"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"},"tags":[{"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,="" in,="" subscribe="" we="" got="" anything="" you="" need.","meta_description":"get="" 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":3915,"tag_id":2}},{"id":3,"name":{"en":"navigations"},"description":"looking="" ensure="" predictable="" and="" consistent="" user="" experience="" on="" website?="" check="" out="" 200+="" navigation="" built="" using="" the="" most="" popular="" utility-first="" framework="" one="" suits="" needs.","meta_description":"choose="" -="" ui.","slug":{"en":"navigations"},"type":null,"order_column":9,"created_at":"2019-07-04t08:20:17.000000z","updated_at":"2022-08-01t16:12:24.000000z","pivot":{"taggable_type":"app\\component","taggable_id":3915,"tag_id":3}},{"id":93,"name":{"en":"toggle"},"description":"the="" toggle="" component="" allows="" users="" select="" simple="" \"yes\"="" or="" \"no\"="" response="" by="" choosing="" two="" available="" options.="" comes="" various="" sizes,="" styles,="" colors,="" crafted="" 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":3915,"tag_id":93}}],"fork":null,"favorites":[{"id":1863,"name":"egoistdeveloper","slug":"egoistdeveloper","bio":"converting="" html="" templates="" sass="" use="" tool="" \ud83d\udc49="" https:\="" egoistdeveloper.github.io\="" twcss-to-sass-playground="" \ud83c\udf89="" see="" my="" all="" components="" at="" here="" github.com\="" egoistdeveloper\="" my-tailwind-components","avatar":"https:\="" avatars0.githubusercontent.com\="" 17010054?v="4","header":null,"created_at":"2020-12-30T23:41:30.000000Z","updated_at":"2022-09-05T21:16:39.000000Z","pivot":{"component_id":3915,"user_id":1863}},{"id":9417,"name":"Chema","slug":"chema","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/23a5936c9402cd1d65b38c647b848c5e","header":null,"created_at":"2022-10-18T02:48:25.000000Z","updated_at":"2022-10-18T02:48:25.000000Z","pivot":{"component_id":3915,"user_id":9417}},{"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":3915,"user_id":3558}},{"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":3915,"user_id":9406}},{"id":9550,"name":"ItsAvyy","slug":"itsavyy","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/24593311?v=4","header":null,"created_at":"2022-10-28T16:16:03.000000Z","updated_at":"2022-10-28T16:16:03.000000Z","pivot":{"component_id":3915,"user_id":9550}},{"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":3915,"user_id":5854}},{"id":9742,"name":"rwizard","slug":"rwizard","bio":null,"avatar":"https:\="" 190453?v="4","header":null,"created_at":"2022-11-15T16:46:24.000000Z","updated_at":"2022-11-15T16:46:24.000000Z","pivot":{"component_id":3915,"user_id":9742}},{"id":10429,"name":"Kostia1023","slug":"kostia1023","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/74052496?v=4","header":null,"created_at":"2023-01-09T08:42:17.000000Z","updated_at":"2023-01-09T08:42:17.000000Z","pivot":{"component_id":3915,"user_id":10429}},{"id":11174,"name":"karlnuttall","slug":"karlnuttall","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/17346471?v=4","header":null,"created_at":"2023-02-24T14:17:23.000000Z","updated_at":"2023-02-24T14:17:23.000000Z","pivot":{"component_id":3915,"user_id":11174}},{"id":10628,"name":"BenSchlottau","slug":"benschlottau","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7984988?v=4","header":null,"created_at":"2023-01-21T17:40:59.000000Z","updated_at":"2023-01-21T17:40:59.000000Z","pivot":{"component_id":3915,"user_id":10628}},{"id":11270,"name":"TaylanTatli","slug":"taylantatli","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/754514?v=4","header":null,"created_at":"2023-03-03T18:06:16.000000Z","updated_at":"2023-03-03T18:06:16.000000Z","pivot":{"component_id":3915,"user_id":11270}},{"id":11966,"name":"Erdogan" gulsoy","slug":"erdogan-gulsoy","bio":null,"avatar":"https:\="" 7d6cdac30f73c3887c83802503a1320b","header":null,"created_at":"2023-04-17t12:27:56.000000z","updated_at":"2023-04-17t12:27:56.000000z","pivot":{"component_id":3915,"user_id":11966}},{"id":12175,"name":"lastofthedinosaurs","slug":"lastofthedinosaurs","bio":null,"avatar":"https:\="" 91705770?v="4","header":null,"created_at":"2023-05-02T09:21:58.000000Z","updated_at":"2023-05-02T09:21:58.000000Z","pivot":{"component_id":3915,"user_id":12175}},{"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":3915,"user_id":12901}},{"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":3915,"user_id":3241}},{"id":18372,"name":"marcinle87","slug":"marcinle87","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/166264523?v=4","header":null,"created_at":"2024-04-22T01:33:23.000000Z","updated_at":"2024-04-22T01:33:23.000000Z","pivot":{"component_id":3915,"user_id":18372}}]}"" :edit="false"> Full screen Preview

Download