Menu profile sidebar

Profile menu sidebar made with Tailwind CSS

Share

<button\r\n class=\"tr-300\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n class=\"h-14 w-14 text-gray-500\" fill=\"none\"\r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n d=\"M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\r\n <\/svg>\r\n <span class=\"text-lg font-medium\">Mi Perfil<\/span>\r\n <\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-span-1 p-3\">\r\n <div class=\"flex flex-col items-center \">\r\n <a href=https://www.creative-tim.com/"/"> <button\r\n class=\"tr-300\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n class=\"h-14 w-14 text-gray-500\" fill=\"none\"\r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" \/>\r\n <\/svg>\r\n <span class=\"text-lg font-medium\">Mis dinero<\/span>\r\n <\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-span-1 p-3\">\r\n <div class=\"flex flex-col items-center \">\r\n <a href=https://www.creative-tim.com/"/"> <button\r\n class=\"tr-300\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n class=\"h-14 w-14 text-gray-500\" fill=\"none\"\r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n d=\"M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z\" \/>\r\n <\/svg>\r\n <span class=\"text-lg font-medium\">Mis referidos<\/span>\r\n <\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-span-1 p-3\">\r\n <div class=\"flex flex-col items-center \">\r\n <a href=https://www.creative-tim.com/"/">/r/n <button class=\"tr-300\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n class=\"h-14 w-14 text-gray-500\" fill=\"none\"\r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\r\n <\/svg>\r\n <span class=\"text-lg font-medium\">Mis facturas<\/span>\r\n <\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-span-1 p-3\">\r\n <div class=\"flex flex-col items-center \">\r\n <a href=https://www.creative-tim.com/"/"> <button class=\"tr-300\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n class=\"h-14 w-14 text-gray-500\" fill=\"none\"\r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" \/>\r\n <\/svg>\r\n <span class=\"text-lg font-medium\">Ayuda<\/span>\r\n <\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-span-1 bg-red-50 p-3\">\r\n <div class=\"flex flex-col items-center \">\r\n <a href=https://www.creative-tim.com/"/"> <button class=\"tr-300\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n class=\"h-14 w-14 text-gray-500\" fill=\"none\"\r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n d=\"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1\" \/>\r\n <\/svg>\r\n <span class=\"text-lg font-medium\">Salir<\/span>\r\n <\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex mx-auto mt-3 w-100 \">\r\n <a href=https://www.creative-tim.com/"/"> <button\r\n class=\"p-2 shadow-lg rounded-2xl tr-300 w-100 font-medium bg-green-500 rounded-md hover:bg-green-600 text-gray-50\">Mejorar\r\n membres\u00eda<\/button><\/a>\r\n <\/div>\r\n <\/div>","author_type":"App\\User","author_id":2769,"collection_id":null,"fork_id":null,"votes":6,"score":"3.0","visits":13978,"popularity":291,"slug":"menu-profile-sidebar","approved":1,"created_at":"2022-03-11T02:29:28.000000Z","updated_at":"2024-08-29T01:19:23.000000Z","downloads":97,"code_views":1104,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":6344,"model_type":"App\\Component","model_id":3211,"collection_name":"preview","name":"temp40117","file_name":"temp40117.png","mime_type":"image\/png","disk":"public","size":66859,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp40117___media_library_original_1280_957.png","temp40117___media_library_original_1070_799.png","temp40117___media_library_original_895_669.png","temp40117___media_library_original_749_559.png","temp40117___media_library_original_627_468.png","temp40117___media_library_original_524_391.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUTgrTG9sT0NqWitsUG1QQS90U0hZeHZGR3NuVXJJSkR1UnM5Y1ZFbmNxT2F3VDJMbWorSWxzdFBqamtETXlqazRwcDJFODFnM3NYWXZGVVUvUkcvS3E1aHJNNFBvYXMybFd6VEtSRXVQcFRzZWw5WHBmeWtPcVc5bGJRZ21KZndGRmpHZEtqVDFjUjhGblozRm9Dc1M4ajBwTkd0T2hSbXIyRnR0TXQ0MUlNUy9sU052cTFGZERRMmlyTElwYlpKeGh3R0ZCTGlwYmpvNFZpQUNnQVVEU1MyRkk1cEZYUC85az0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":6222,"created_at":"2022-03-11T02:29:34.000000Z","updated_at":"2022-03-11T02:29:35.000000Z","conversions_disk":"public","uuid":"d44d6848-3472-4656-8cb0-454afcaf2498","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/6344\/temp40117.png","preview_url":""}],"author":{"id":2769,"name":"cluzstudio","slug":"cluzstudio","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/52290307?v=4","header":null,"created_at":"2021-03-23T12:13:06.000000Z","updated_at":"2021-03-23T12:13:06.000000Z"},"tags":[{"id":7,"name":{"en":"Pages"},"description":"Looking to get the work done faster? Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS. Get started or get inspired!","meta_description":"Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS","slug":{"en":"pages"},"type":null,"order_column":10,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:13:03.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":3211,"tag_id":7}},{"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":3211,"tag_id":5}},{"id":27,"name":{"en":"Menu"},"description":"A menu is a UI component which displays a list of choices on temporary surfaces. See below our collection of Menu examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Menu examples that you can add directly to your Tailwind UI project for displaying a list of choices on temporary surfaces.","slug":{"en":"menu"},"type":null,"order_column":26,"created_at":"2022-08-31T14:19:53.000000Z","updated_at":"2022-12-21T11:02:45.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":3211,"tag_id":27}},{"id":32,"name":{"en":"Sidebar"},"description":"The Sidebar component is used to show a list of menu items and multi-level dropdown items on either side of the page to navigate on your web app. See below our collection of Sidebars that you can add directly to your Tailwind UI project.","meta_description":"Visit our Sidebars examples that you can add to your Tailwind UI project for showing a list of menu items","slug":{"en":"sidebar"},"type":null,"order_column":31,"created_at":"2022-08-31T14:22:37.000000Z","updated_at":"2022-12-21T11:02:00.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":3211,"tag_id":32}}],"fork":null,"favorites":[{"id":6910,"name":"montserrathdezm","slug":"montserrathdezm","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/82480785?v=4","header":null,"created_at":"2022-02-18T18:45:27.000000Z","updated_at":"2022-02-18T18:45:27.000000Z","pivot":{"component_id":3211,"user_id":6910}},{"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":3211,"user_id":11390}},{"id":9618,"name":"Maurilozz","slug":"maurilozz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/90498804?v=4","header":null,"created_at":"2022-11-04T01:09:42.000000Z","updated_at":"2022-11-04T01:09:42.000000Z","pivot":{"component_id":3211,"user_id":9618}},{"id":12722,"name":"smartdapan","slug":"smartdapan","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/116625972?v=4","header":null,"created_at":"2023-06-09T20:21:23.000000Z","updated_at":"2023-06-09T20:21:23.000000Z","pivot":{"component_id":3211,"user_id":12722}}]}" :edit="false"> Full screen Preview

cluzstudio

2 components Profile On

Menu profile sidebar

Community Rate

Related components