Tailwind CSS Accordion

Tailwind CSS Accordion made using only CSS. NO 🚫 JS is used.

/r/n <style type=\"text\/tailwindcss\">\r\n * {\r\n font-family: \"Poppins\", sans-serif;\r\n }\r\n @layer components {\r\n .item {\r\n @apply w-full sm:w-96 text-xs sm:text-sm flex items-center gap-x-3 flex-wrap select-none;\r\n }\r\n .content {\r\n @apply peer-checked:max-h-max max-h-0 basis-full peer-checked:border-y-[1px] border-blue-300 peer-checked:p-3 overflow-hidden transition-all select-text;\r\n }\r\n }\r\n <\/style>\r\n <\/head>\r\n <body\r\n class=\"grid place-content-center h-screen bg-gradient-to-bl from-cyan-200 via-sky-300 to-blue-400\"\r\n >\r\n <ul class=\"text-white shadow-2xl\">\r\n \r\n <li class=\"bg-indigo-500 item\">\r\n \r\n <input type=\"checkbox\" id=\"faq1\" class=\"peer appearance-none\" \/>\r\n <i class=\"fa-solid fa-chevron-right peer-checked:hidden inline\"><\/i>\r\n <i class=\"fa-solid fa-chevron-down peer-checked:inline hidden\"><\/i>\r\n <label for=\"faq1\" class=\"py-4 cursor-pointer grow\">\r\n \r\n <p>What is your name?<\/p><\/label\r\n >\r\n \r\n <div class=\"content\">\r\n \r\n <p>My name is Sohan Emon<\/p>\r\n <\/div>\r\n <\/li>\r\n <li class=\"bg-sky-500 item\">\r\n \r\n <input type=\"checkbox\" id=\"faq2\" class=\"peer appearance-none\" \/>\r\n <i class=\"fa-solid fa-chevron-right peer-checked:hidden inline\"><\/i>\r\n <i class=\"fa-solid fa-chevron-down peer-checked:inline hidden\"><\/i>\r\n <label for=\"faq2\" class=\"py-4 cursor-pointer grow\">\r\n \r\n <p>What do you do?<\/p><\/label\r\n >\r\n \r\n <div class=\"content\">\r\n \r\n <p>I'm a fullstack web developer.<\/p>\r\n <\/div>\r\n <\/li>\r\n <li class=\"bg-blue-500 item\">\r\n \r\n <input type=\"checkbox\" id=\"faq3\" class=\"peer appearance-none\" \/>\r\n <i class=\"fa-solid fa-chevron-right peer-checked:hidden inline\"><\/i>\r\n <i class=\"fa-solid fa-chevron-down peer-checked:inline hidden\"><\/i>\r\n <label for=\"faq3\" class=\"py-4 cursor-pointer grow\">\r\n \r\n <p>What is your favorite stack?<\/p><\/label\r\n >\r\n \r\n <div class=\"content\">\r\n \r\n <p>Next, Tailwind CSS, Node, MongoDB<\/p>\r\n <\/div>\r\n <\/li>\r\n <li class=\"bg-cyan-600 item\">\r\n \r\n <input type=\"checkbox\" id=\"faq4\" class=\"peer appearance-none\" \/>\r\n <i class=\"fa-solid fa-chevron-right peer-checked:hidden inline\"><\/i>\r\n <i class=\"fa-solid fa-chevron-down peer-checked:inline hidden\"><\/i>\r\n <label for=\"faq4\" class=\"py-4 cursor-pointer grow\">\r\n \r\n <p>Do you have a portfolio?<\/p><\/label\r\n >\r\n \r\n <div class=\"content\">\r\n \r\n <p>\r\n Go,\r\n <a\r\n class=\"text-blue-100 hover:underline underline-offset-2\"\r\n target=\"_blank\"\r\n href=https://www.creative-tim.com/"https:////onemanse.vercel.app/"/r/n >there<\/a\r\n >\r\n <\/p>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/body>\r\n<\/html>","author_type":"App\\User","author_id":8574,"collection_id":null,"fork_id":null,"votes":3,"score":"3.7","visits":10237,"popularity":444,"slug":"css-only-accordion","approved":1,"created_at":"2022-09-16T05:39:36.000000Z","updated_at":"2024-09-19T04:16:22.000000Z","downloads":120,"code_views":2356,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":8649,"model_type":"App\\Component","model_id":3837,"collection_name":"preview","name":"temp79843","file_name":"temp79843.png","mime_type":"image\/png","disk":"public","size":26033,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp79843___media_library_original_1280_957.png","temp79843___media_library_original_1070_800.png","temp79843___media_library_original_895_669.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU2l2VFBQQ2dBb0FLQUdsd0tBRHpCUUFlWUtBQU9EUUJ6L2kvWFRvR2tUWFlHU2d6aXUzQ1VQckZWUTdpYnNlQVhYN1NsN0ZjT2l3OEE0cjlEaHd4VGxGTnM1L2FGUlAyb0wzN1NrWmc2bkZiUGhXbnl0M0Y3UStoZkEvaUZ2RW1pUVhqRGFYWE5mbk9PdzZ3MVowMTBPaE82UC8yUT09Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":8462,"created_at":"2023-02-03T13:06:49.000000Z","updated_at":"2023-02-03T13:06:51.000000Z","conversions_disk":"public","uuid":"b9a4fcab-0909-41c1-89d0-c3e2ee04a4a5","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8649\/temp79843.png","preview_url":""}],"author":{"id":8574,"name":"sohanemon","slug":"sohanemon","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/42204040?v=4","header":null,"created_at":"2022-08-02T10:35:23.000000Z","updated_at":"2022-08-02T10:35:23.000000Z"},"tags":[{"id":17,"name":{"en":"Accordions"},"description":"The Accordion component allows the user to see and hide sections of related content on a page. See below our collection of Accordion examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Accordions that you can add directly to your Tailwind UI project to allow the user to see & hide sections of related content.","slug":{"en":"accordions"},"type":null,"order_column":16,"created_at":"2022-08-31T14:14:39.000000Z","updated_at":"2022-12-21T11:19:06.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":3837,"tag_id":17}}],"fork":null,"favorites":[{"id":4898,"name":"brunohafonso95","slug":"brunohafonso95","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43271781?v=4","header":null,"created_at":"2021-09-07T03:42:51.000000Z","updated_at":"2021-09-07T03:42:51.000000Z","pivot":{"component_id":3837,"user_id":4898}},{"id":6569,"name":"Glicht","slug":"glicht","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/96473dc05f9454fd44314396260fb37a","header":"\/storage\/headers\/2mQDvwOW5yMRC1ZjcsCwpzaj7NjklBMIpogbRbpA.jpg","created_at":"2022-01-18T19:50:36.000000Z","updated_at":"2022-11-25T18:03:40.000000Z","pivot":{"component_id":3837,"user_id":6569}},{"id":18241,"name":"yehoshu1","slug":"yehoshu1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/97988687?v=4","header":null,"created_at":"2024-04-15T13:17:08.000000Z","updated_at":"2024-04-15T13:17:08.000000Z","pivot":{"component_id":3837,"user_id":18241}}]}" :edit="false"> Full screen Preview

sohanemon

3 components Profile On

Tailwind CSS Accordion

Community Rate

Related components