Tailwind CSS COREUI-Dashboard

Admin Dashboard - Only For Desktop using Tailwind CSS

Share

/r/n <script nomodule src=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//gh//alpinejs//alpine@v2.x.x//dist//alpine-ie11.min.js/" defer><\/script>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"flex\" style=\"font-family: Arial;\" x-data=\"{ open: true }\">\r\n <div class=\"sidebar h-screen\" style=\"width: 260px;\" x-show=\"open\">\r\n <div>\r\n <div class=\"text-purple-200 bg-purple-700 h-14 mx-auto block px-4 py-5\">\r\n WELCOME, ADMIN\r\n <\/div>\r\n <div class=\"h-screen bg-purple-700\">\r\n <div class=\"\" style=\"font-size: 14px;\">\r\n <a href=https://www.creative-tim.com/"/"/r/n class=\"h-12 px-4 py-3 text-purple-800 tracking-wider block bg-white font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-white\">Dashboard<\/a>\r\n <a href=https://www.creative-tim.com/"/"/r/n class=\"h-12 px-4 py-3 text-white tracking-wider block bg-purple-600 font-thin border-b-2 border-purple-800 hover:text-purple-800 hover:bg-white\">Products<\/a>\r\n <a href=https://www.creative-tim.com/"/"/r/n class=\"h-12 px-4 py-3 text-white tracking-wider block bg-purple-600 font-thin border-b-2 border-purple-800 hover:text-purple-800 hover:bg-white\">Sales<\/a>\r\n <a href=https://www.creative-tim.com/"/"/r/n class=\"h-12 px-4 py-3 text-white tracking-wider block bg-purple-600 font-thin border-b-2 border-purple-800 hover:text-purple-800 hover:bg-white\">Orders<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full z-10\">\r\n <div\r\n class=\"sticky top-0 bg-purple-600 header bg-white h-14 px-10 py-4 border-b-4 border-purple-900 flex items-center justify-between\">\r\n <div class=\"flex items-center space-x-12 text-sm\">\r\n <i class=\"hover:text-purple text-xl fas fa-bars font-thin cursor-pointer text-white\"\r\n @click=\"open = !open\"><\/i>\r\n <a href=https://www.creative-tim.com/"/"/r/n class=\"hover:text-purple-400 text-white tracking-wider font-thin\"><span>Dashboard<\/span><\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"hover:text-purple-400 text-white tracking-wider font-thin\">User<\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"hover:text-purple-400 text-white tracking-wider font-thin\">Settings<\/a>\r\n <\/div>\r\n <div class=\"flex items-center space-x-8 text-gray-400 text-base px-4 py-2\">\r\n <span class=\"relative inline-block cursor-pointer\">\r\n <i class=\"fas fa-bell font-thin\"><\/i>\r\n <span\r\n class=\"absolute top-0 right-0 inline-flex items-center justify-center px-1 py-0.5 text-xs font-thin leading-none text-red-100 transform translate-x-1\/2 -translate-y-1\/2 bg-red-600 rounded-full\">99<\/span>\r\n <\/span>\r\n <span class=\"relative inline-block cursor-pointer\">\r\n <i class=\"fas fa-list font-thin\"><\/i>\r\n <span\r\n class=\"absolute top-0 right-0 inline-flex items-center justify-center px-1 py-0.5 text-xs font-thin leading-none text-red-100 transform translate-x-1\/2 -translate-y-1\/2 bg-purple-600 rounded-full\">99<\/span>\r\n <\/span>\r\n <span class=\"relative inline-block cursor-pointer\">\r\n <i class=\"fas fa-envelope font-thin\"><\/i>\r\n <span\r\n class=\"absolute top-0 right-0 inline-flex items-center justify-center px-1 py-0.5 text-xs font-thin leading-none text-red-100 transform translate-x-1\/2 -translate-y-1\/2 bg-yellow-600 rounded-full\">9<\/span>\r\n <\/span>\r\n <i class=\"fas fa-user-circle fa-lg font-thin cursor-pointer\"><\/i>\r\n <i class=\"fas fa-cog fa-2x font-thin text-white cursor-pointer animate animate-spin hover:text-green-500\"\r\n style=\"animation-duration: 7000ms;\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div\r\n class=\"sticky top-14 header bg-white h-12 px-10 py-4 border-b-2 border-gray-200 flex items-center justify-between\">\r\n <div class=\"flex items-center space-x-2 text-gray-400 text-base\">\r\n <span class=\"text-black tracking-wider font-thin text-sm\">Home<\/span>\r\n <span>\/<\/span>\r\n <span class=\"tracking-wide text-sm\">\r\n <span class=\"hover:underline cursor-pointer\"\r\n style=\"color: #20a8d8; font-weight: 100;\">Admin<\/span>\r\n <\/span>\r\n <span>\/<\/span>\r\n <span class=\"text-black tracking-wider font-thin text-sm text-opacity-50\">Dashboard<\/span>\r\n <\/div>\r\n <div class=\"flex items-center space-x-6 text-gray-400 text-base text-black\">\r\n <i class=\"fas fa-comment-alt mr-1 text-purple-500\"><\/i>\r\n <a href=https://www.creative-tim.com/"/" class=\"mr-3 text-black\">\r\n <i class=\"fas fa-chart-line text-purple-500\"><\/i>\r\n <span\r\n class=\"hover:text-purple-400 text-black text-opacity-50 tracking-wider font-thin\">Dashboard<\/span>\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"/" class=\"text-black\">\r\n <i class=\"fas fa-cog text-purple-500\"><\/i>\r\n <span\r\n class=\"hover:text-purple-400 text-black text-opacity-50 tracking-wider font-thin\">Setting<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"body\">\r\n <div class=\"p-8\" style=\"background-color: #E4E5E6;\">\r\n <div class=\"main bg-white border-2 border-gray-300 rounded\">\r\n <div class=\"rounded-t border-b-2 border-gray-300\" style=\"background-color: #F0F3F5;\">\r\n <h1 class=\"p-4\">Headings<\/h1>\r\n <\/div>\r\n <div class=\"p-4\">\r\n <p class=\"mb-4\">Documentation and examples for Bootstrap typography, including global\r\n settings, headings,\r\n body text, lists, and more.<\/p>\r\n <hr>\r\n Heading Example\r\n <h1><\/h1>\r\n\r\n h1. Bootstrap heading\r\n <h2><\/h2>\r\n\r\n h2. Bootstrap heading\r\n <h3><\/h3>\r\n\r\n h3. Bootstrap heading\r\n <h4><\/h4>\r\n\r\n h4. Bootstrap heading\r\n <h5><\/h5>\r\n\r\n h5. Bootstrap heading\r\n <h6><\/h6>\r\n\r\n h6. Bootstrap heading\r\n <\/div>\r\n <\/div>\r\n <div class=\"main bg-white border-2 border-gray-300 rounded\">\r\n <div class=\"rounded-t border-b-2 border-gray-300\" style=\"background-color: #F0F3F5;\">\r\n <h1 class=\"p-4\">Headings<\/h1>\r\n <\/div>\r\n <div class=\"p-4\">\r\n <p class=\"mb-4\">Documentation and examples for Bootstrap typography, including global\r\n settings, headings,\r\n body text, lists, and more.<\/p>\r\n <hr>\r\n Heading Example\r\n <h1><\/h1>\r\n\r\n h1. Bootstrap heading\r\n <h2><\/h2>\r\n\r\n h2. Bootstrap heading\r\n <h3><\/h3>\r\n\r\n h3. Bootstrap heading\r\n <h4><\/h4>\r\n\r\n h4. Bootstrap heading\r\n <h5><\/h5>\r\n\r\n h5. Bootstrap heading\r\n <h6><\/h6>\r\n\r\n h6. Bootstrap heading\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n\r\n<\/html>","author_type":"App\\User","author_id":2599,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":12596,"popularity":279,"slug":"tailwind-css-coreui-dashboard","approved":1,"created_at":"2023-10-23T14:40:13.000000Z","updated_at":"2024-08-29T06:46:17.000000Z","downloads":88,"code_views":144,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[],"author":{"id":2599,"name":"safal123","slug":"safal123","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/16102070?v=4","header":null,"created_at":"2021-03-11T04:34:30.000000Z","updated_at":"2021-03-11T04:34:30.000000Z"},"tags":[{"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":5641,"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":5641,"tag_id":41}}],"fork":null,"favorites":[]}" :edit="false"> Full screen Preview

safal123

3 components Profile On

Tailwind CSS COREUI-Dashboard

Community Rate

Related components