Tailwind CSS Sidebar Dashboard

Sidebar for Dashboards made using Tailwind CSS

/r/n <img alt=\"Logo\" src=https://www.creative-tim.com/"https:////raw.githubusercontent.com//Loopple//loopple-public-assets//main//riva-dashboard-tailwind//img//logos//loopple.svg/" class=\"inline\">\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hidden border-b border-dashed lg:block dark:border-neutral-700\/70 border-neutral-200\"><\/div>\r\n\r\n <div class=\"flex items-center justify-between px-8 py-5\">\r\n <div class=\"flex items-center mr-5\">\r\n <div class=\"mr-5\">\r\n <div class=\"inline-block relative shrink-0 cursor-pointer rounded-[.95rem]\">\r\n <img class=\"w-[40px] h-[40px] shrink-0 inline-block rounded-[.95rem]\" src=https://www.creative-tim.com/"https:////raw.githubusercontent.com//Loopple//loopple-public-assets//main//riva-dashboard-tailwind//img//avatars//avatar1.jpg/" alt=\"avatar image\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"mr-2 \">\r\n <a href=https://www.creative-tim.com/"javascript:void(0)/" class=\"dark:hover:text-primary hover:text-primary transition-colors duration-200 ease-in-out text-[1.075rem] font-medium dark:text-neutral-400\/90 text-secondary-inverse\">Robert Jason<\/a>\r\n <span class=\"text-secondary-dark dark:text-stone-500 font-medium block text-[0.85rem]\">SEO Manager<\/span>\r\n <\/div>\r\n <\/div>\r\n <a class=\"inline-flex relative items-center group justify-end text-base font-medium leading-normal text-center align-middle cursor-pointer rounded-[.95rem] transition-colors duration-150 ease-in-out text-dark bg-transparent shadow-none border-0\" href=https://www.creative-tim.com/"javascript:void(0)/">/r/n <span class=\"leading-none transition-colors duration-200 ease-in-out peer shrink-0 group-hover:text-primary text-secondary-dark\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z\"><\/path>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hidden border-b border-dashed lg:block dark:border-neutral-700\/70 border-neutral-200\"><\/div>\r\n\r\n <div class=\"relative pl-3 my-5 overflow-y-scroll\">\r\n <div class=\"flex flex-col w-full font-medium\">\r\n\r\n \r\n <div>\r\n <span class=\"select-none flex items-center px-4 py-[.775rem] cursor-pointer my-[.4rem] rounded-[.95rem]\">\r\n <a href=https://www.creative-tim.com/"javascript:;/" class=\"flex items-center flex-grow text-[1.15rem] dark:text-neutral-400\/75 text-stone-500 hover:text-dark\">Sales<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n\r\n \r\n <div>\r\n <span class=\"select-none flex items-center px-4 py-[.775rem] cursor-pointer my-[.4rem] rounded-[.95rem]\">\r\n <a href=https://www.creative-tim.com/"javascript:;/" class=\"flex items-center flex-grow text-[1.15rem] dark:text-neutral-400\/75 text-stone-500 hover:text-dark\">Profile<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <span class=\"select-none flex items-center px-4 py-[.775rem] cursor-pointer my-[.4rem] rounded-[.95rem]\">\r\n <a href=https://www.creative-tim.com/"javascript:;/" class=\"flex items-center flex-grow text-[1.15rem] dark:text-neutral-400\/75 text-stone-500 hover:text-dark\">Settings<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"block pt-5 pb-[.15rem]\">\r\n <div class=\"px-4 py-[.65rem]\">\r\n <span class=\"font-semibold text-[0.95rem] uppercase dark:text-neutral-500\/80 text-secondary-dark\">Applications<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <span class=\"select-none flex items-center px-4 py-[.775rem] cursor-pointer my-[.4rem] rounded-[.95rem]\">\r\n <a href=https://www.creative-tim.com/"javascript:;/" class=\"flex items-center flex-grow text-[1.15rem] dark:text-neutral-400\/75 text-stone-500 hover:text-dark\">Users<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n\r\n \r\n <div>\r\n <span class=\"select-none flex items-center px-4 py-[.775rem] cursor-pointer my-[.4rem] rounded-[.95rem]\">\r\n <a href=https://www.creative-tim.com/"javascript:;/" class=\"flex items-center flex-grow text-[1.15rem] dark:text-neutral-400\/75 text-stone-500 hover:text-dark\">Orders<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <span class=\"select-none flex items-center px-4 py-[.775rem] cursor-pointer my-[.4rem] rounded-[.95rem]\">\r\n <a href=https://www.creative-tim.com/"javascript:;/" class=\"flex items-center flex-grow text-[1.15rem] dark:text-neutral-400\/75 text-stone-500 hover:text-dark\">Track Order<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <span class=\"select-none flex items-center px-4 py-[.775rem] cursor-pointer my-[.4rem] rounded-[.95rem]\">\r\n <a href=https://www.creative-tim.com/"javascript:;/" class=\"flex items-center flex-grow text-[1.15rem] dark:text-neutral-400\/75 text-stone-500 hover:text-dark\">Products<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n <\/div>\r\n <div class=\"flex flex-wrap ml-9 my-5\">\r\n <div class=\"w-full max-w-full sm:w-1\/4 mx-auto text-center\">\r\n <p class=\"text-lg text-slate-500 py-1\">\r\n Tailwind CSS Component from <a href=https://www.creative-tim.com/"https:////www.loopple.com//theme//riva-dashboard-tailwind?ref=tailwindcomponents\%22 class=\"text-slate-700 hover:text-slate-900\" target=\"_blank\">Riva Dashboard Library<\/a> by <a href=https://www.creative-tim.com/"https:////www.loopple.com/" class=\"text-slate-700 hover:text-slate-900\" target=\"_blank\">Loopple Builder<\/a>.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/body>\r\n<html>","author_type":"App\\User","author_id":14127,"collection_id":null,"fork_id":null,"votes":3,"score":"5.0","visits":16683,"popularity":1040,"slug":"tailwind-css-sidebar-dashboard","approved":1,"created_at":"2023-10-20T11:33:50.000000Z","updated_at":"2024-09-19T04:31:38.000000Z","downloads":193,"code_views":4535,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":10568,"model_type":"App\\Component","model_id":5632,"collection_name":"preview","name":"temp68818","file_name":"temp68818.png","mime_type":"image\/png","disk":"public","size":26891,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp68818___media_library_original_1280_957.png","temp68818___media_library_original_1070_800.png","temp68818___media_library_original_895_669.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvVFRUa09TYzEwVmR6Q25zVXIrRVRTTURYUkhZeGx1UXhRQ0VZSFNySUo2QU5IVFVKUmpYSlYzT21uc1VyZ1ltYXVpT3hoTGNqcXlRb0FuZ3UyZ1VnVm5LQ2tXcFdJbmN1eFk5NnRLeExkM2NiVEVGQUgvLzJRPT0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":2,"created_at":"2023-10-20T11:35:37.000000Z","updated_at":"2023-10-20T11:35:38.000000Z","conversions_disk":"public","uuid":"3b9590d7-3f70-43af-a3e0-35f8f28cbc68","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/10568\/temp68818.png","preview_url":""}],"author":{"id":14127,"name":"Loopple","slug":"loopple","bio":"Drag & Drop Template Builder for Modern Developers\r\n\r\nhttps:\/\/www.loopple.com","avatar":"\/storage\/avatars\/mQDQW95iHL6HPU0BigqNwvqQ7V0LgRf4WnDy4Ixw.png","header":null,"created_at":"2023-09-12T16:02:43.000000Z","updated_at":"2023-10-26T18:39:57.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":5632,"tag_id":7}},{"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":5632,"tag_id":32}},{"id":38,"name":{"en":"Dashboard"},"description":"A Dashboard is a project management and data visualization tool. See below our collection of Admins that you can add directly to your Tailwind UI project.","meta_description":"Visit our Dashboard collection that you can add to your Tailwind UI project to analyze your data.","slug":{"en":"dashboard"},"type":null,"order_column":37,"created_at":"2022-08-31T14:25:37.000000Z","updated_at":"2022-12-21T11:01:15.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5632,"tag_id":38}},{"id":41,"name":{"en":"Layout"},"description":"A layout component includes sections of your website that you want to share across multiple pages. See below our collection of Layouts that you can add directly to your Tailwind UI project.","meta_description":"Visit our Layouts collection that you can add to your Tailwind UI project to create awesome websites.","slug":{"en":"layout"},"type":null,"order_column":40,"created_at":"2022-08-31T14:27:17.000000Z","updated_at":"2022-12-21T11:01:02.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5632,"tag_id":41}}],"fork":null,"favorites":[{"id":14127,"name":"Loopple","slug":"loopple","bio":"Drag & Drop Template Builder for Modern Developers\r\n\r\nhttps:\/\/www.loopple.com","avatar":"\/storage\/avatars\/mQDQW95iHL6HPU0BigqNwvqQ7V0LgRf4WnDy4Ixw.png","header":null,"created_at":"2023-09-12T16:02:43.000000Z","updated_at":"2023-10-26T18:39:57.000000Z","pivot":{"component_id":5632,"user_id":14127}},{"id":14824,"name":"Arnazio","slug":"arnazio","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44091018?v=4","header":null,"created_at":"2023-10-22T21:50:51.000000Z","updated_at":"2023-10-22T21:50:51.000000Z","pivot":{"component_id":5632,"user_id":14824}},{"id":15502,"name":"kobe Op de Beeck","slug":"kobe-op-de-beeck","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/05a0ed92c19d1b945e6b75712449e115","header":null,"created_at":"2023-11-27T18:22:59.000000Z","updated_at":"2023-11-27T18:22:59.000000Z","pivot":{"component_id":5632,"user_id":15502}},{"id":13886,"name":"allanokothdev","slug":"allanokothdev","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/19547628?v=4","header":null,"created_at":"2023-08-30T10:34:02.000000Z","updated_at":"2023-08-30T10:34:02.000000Z","pivot":{"component_id":5632,"user_id":13886}}]}" :edit="false"> Full screen Preview