Tailwind CSS Material 3 Tabs

Google Material Design 3 Tabs in Tailwind CSS

Share

\r\n\r\n <div class=\"flex flex-col mb-6\">\r\n <p class=\"text-sm tracking-[0.1px] mb-3\">Primary & Secondary Tabs<\/p>\r\n <div class=\"flex flex-col gap-4\">\r\n \r\n <div class=\"tabs flex flex-col w-full md:w-[360px]\">\r\n \r\n <div class=\"relative flex flex-row items-center\">\r\n <button data-type=\"tabs\" data-target=\"#tab-1\" class=\"active w-1\/3 md:w-[120px] h-16 px-4 py-2 flex flex-col justify-end items-center gap-1 hover:bg-surface-100 dark:hover:bg-surfacedark-100\">\r\n <span class=\"material-symbols-outlined\">music_note<\/span>\r\n <p class=\"text-sm tracking-[.00714em]\">Music<\/p>\r\n <\/button>\r\n <button data-type=\"tabs\" data-target=\"#tab-2\" class=\"w-1\/3 md:w-[120px] h-16 px-4 py-2 flex flex-col justify-end items-center gap-1 hover:bg-surface-100 dark:hover:bg-surfacedark-100\">\r\n <span class=\"material-symbols-outlined\">image<\/span>\r\n <p class=\"text-sm tracking-[.00714em]\">Photos<\/p>\r\n <\/button>\r\n <button data-type=\"tabs\" data-target=\"#tab-3\" class=\"w-1\/3 md:w-[120px] h-16 px-4 py-2 flex flex-col justify-end items-center gap-1 hover:bg-surface-100 dark:hover:bg-surfacedark-100\">\r\n <span class=\"material-symbols-outlined\">videocam<\/span>\r\n <p class=\"text-sm tracking-[.00714em]\">Video<\/p>\r\n <\/button>\r\n \r\n <div role=\"indicator\" class=\"absolute left-0 bottom-0 transition-all duration-200 ease-in-out bg-purple-600 dark:bg-purple-200 w-[40px] ml-[10%] md:ml-[40px] h-0.5 rounded-t-full\"><\/div>\r\n <\/div>\r\n <hr class=\"border-gray-200 dark:border-gray-700\">\r\n \r\n <div class=\"flex flex-col\">\r\n <div id=\"tab-1\" role=\"tabpanel\" class=\"active [&.active]:block hidden py-4 transition duration-400 ease-in-out\">\r\n <h3>Tabs content 1<\/h3>\r\n <\/div>\r\n <div id=\"tab-2\" role=\"tabpanel\" class=\"[&.active]:block hidden py-4 transition duration-400 ease-in-out\">\r\n <h3>Tabs content 2<\/h3>\r\n <\/div>\r\n <div id=\"tab-3\" role=\"tabpanel\" class=\"[&.active]:block hidden py-4 transition duration-400 ease-in-out\">\r\n <h3>Tabs content 3<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"tabs flex flex-col w-full md:w-[360px]\">\r\n \r\n <div class=\"relative flex flex-row items-center\">\r\n <button data-type=\"tabs\" data-target=\"#tab-4\" class=\"active w-1\/3 md:w-[120px] h-16 px-4 flex flex-col justify-end items-center gap-1 relative py-2 hover:bg-surface-100 dark:hover:bg-surfacedark-100\">\r\n <span class=\"material-symbols-outlined\">music_note<\/span>\r\n <p class=\"text-sm tracking-[.00714em]\">Music<\/p>\r\n <\/button>\r\n <button data-type=\"tabs\" data-target=\"#tab-5\" class=\"w-1\/3 md:w-[120px] h-16 px-4 flex flex-col justify-end items-center gap-1 relative py-2 hover:bg-surface-100 dark:hover:bg-surfacedark-100\">\r\n <span class=\"material-symbols-outlined\">image<\/span>\r\n <p class=\"text-sm tracking-[.00714em]\">Photos<\/p>\r\n <\/button>\r\n <button data-type=\"tabs\" data-target=\"#tab-6\" class=\"w-1\/3 md:w-[120px] h-16 px-4 flex flex-col justify-end items-center gap-1 relative py-2 hover:bg-surface-100 dark:hover:bg-surfacedark-100\">\r\n <span class=\"material-symbols-outlined\">videocam<\/span>\r\n <p class=\"text-sm tracking-[.00714em]\">Video<\/p>\r\n <\/button>\r\n \r\n <div role=\"indicator\" class=\"absolute left-0 bottom-0 transition-all duration-200 ease-in-out bg-purple-600 dark:bg-purple-200 w-1\/3 md:w-[120px] h-0.5 rounded-t-full\"><\/div>\r\n <\/div>\r\n <hr class=\"border-gray-200 dark:border-gray-700\">\r\n \r\n <div class=\"flex flex-col\">\r\n <div id=\"tab-4\" role=\"tabpanel\" class=\"active [&.active]:block hidden py-4 transition duration-400 ease-in-out\">\r\n <h3>Tabs content 1<\/h3>\r\n <\/div>\r\n <div id=\"tab-5\" role=\"tabpanel\" class=\"[&.active]:block hidden py-4 transition duration-400 ease-in-out\">\r\n <h3>Tabs content 2<\/h3>\r\n <\/div>\r\n <div id=\"tab-6\" role=\"tabpanel\" class=\"[&.active]:block hidden py-4 transition duration-400 ease-in-out\">\r\n <h3>Tabs content 3<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <script src=https://www.creative-tim.com/"https:////aribudin.github.io//tailmater//src//js//tailmater.js/">/r/n \r\n <div class='text-base leading-7'>\r\n <p class='font-medium text-gray-700'>Download Material 3 components in Tailmater<\/p>\r\n <p>\r\n <a target='_blank' href=https://www.creative-tim.com/twcomponents/component/'https:////github.com//aribudin//tailmater' class='text-purple-600 hover:underline'>Download More Components\u2192<\/a>\r\n <\/p>\r\n <p>\r\n Snippet by <a target='_blank' href=https://www.creative-tim.com/twcomponents/component/'https:////twitter.com//ari_budin' class='text-purple-600 hover:underline'>Ari Budin<\/a>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>","author_type":"App\\User","author_id":7272,"collection_id":null,"fork_id":null,"votes":6,"score":"3.0","visits":6238,"popularity":231,"slug":"material-3-tabs","approved":1,"created_at":"2023-02-18T07:18:20.000000Z","updated_at":"2024-09-19T05:35:50.000000Z","downloads":77,"code_views":1441,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":9086,"model_type":"App\\Component","model_id":4773,"collection_name":"preview","name":"temp31810","file_name":"temp31810.png","mime_type":"image\/png","disk":"public","size":159489,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp31810___media_library_original_1280_957.png","temp31810___media_library_original_1070_800.png","temp31810___media_library_original_895_669.png","temp31810___media_library_original_749_560.png","temp31810___media_library_original_627_469.png","temp31810___media_library_original_524_392.png","temp31810___media_library_original_439_328.png","temp31810___media_library_original_367_274.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEErMjVyaXYwQlJLR0hUN200VGVrWklOSHRxY0hac0RQdnRMdTRFTHZFUW83NHJwcDE2Y25aTVppc2NrNXIwRUJzUGRmT09lOWNQSm9CNlY0Ym50MzA2TU50emp2WHhtTmpQMmpzU3lYeFkxdi9BR0xMdDI3c2RxZUE1MVdWd1I0eS93Qjl2clgzOGRpaHp5TWFWaGxpRFY3dTNVS2toQUh2WFBMRFU1TzdRaFo5YXZMaU1vOHJGVDJ6UkhEVTRPNlFXS1ZkYUd6LzJRPT0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":8803,"created_at":"2023-02-18T07:18:28.000000Z","updated_at":"2023-02-18T07:18:31.000000Z","conversions_disk":"public","uuid":"910d734b-cdd6-404c-b399-4f96e559e164","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/9086\/temp31810.png","preview_url":""}],"author":{"id":7272,"name":"aribudin","slug":"aribudin","bio":"Professional Web Developer","avatar":"\/storage\/avatars\/8PR2Sc96X2m80fyVhJ0ryC3XGMVd6F2AnOw3pKEE.jpg","header":"\/storage\/headers\/xKBwqKnkrFM8KpLgwjWFoVzN0JR4lEhT5M4H6S7q.png","created_at":"2022-03-22T00:39:53.000000Z","updated_at":"2023-02-18T07:28:43.000000Z"},"tags":[{"id":11,"name":{"en":"Tabs"},"description":"Explore our collection of tab examples that will help you organize your content. Our examples come with snippets that are ready-to-use directly in your Tailwind CSS project.","meta_description":"Explore our collection of tab examples that will help you organize your content for your Tailwind project.","slug":{"en":"tabs"},"type":null,"order_column":12,"created_at":"2020-09-29T11:58:26.000000Z","updated_at":"2022-08-01T16:21:57.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":4773,"tag_id":11}}],"fork":null,"favorites":[{"id":4536,"name":"paramjeet-dhiman","slug":"paramjeet-dhiman","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/86948618?v=4","header":null,"created_at":"2021-08-08T03:47:42.000000Z","updated_at":"2021-08-08T03:47:42.000000Z","pivot":{"component_id":4773,"user_id":4536}},{"id":11323,"name":"carullahtursun","slug":"carullahtursun","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/62027425?v=4","header":null,"created_at":"2023-03-06T20:02:41.000000Z","updated_at":"2023-03-06T20:02:41.000000Z","pivot":{"component_id":4773,"user_id":11323}},{"id":11775,"name":"jakkph","slug":"jakkph","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/25721891?v=4","header":null,"created_at":"2023-04-05T19:42:14.000000Z","updated_at":"2023-04-05T19:42:14.000000Z","pivot":{"component_id":4773,"user_id":11775}},{"id":19872,"name":"Igor097","slug":"igor097","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/26531334?v=4","header":null,"created_at":"2024-07-19T11:28:44.000000Z","updated_at":"2024-07-19T11:28:44.000000Z","pivot":{"component_id":4773,"user_id":19872}}]}" :edit="false"> Full screen Preview

aribudin

1 component

Tailwind CSS Material 3 Tabs

Community Rate

Related components