HR dashboard

Admin Dashboard

Share

/r/n <script\r\n defer=\"\"\r\n src=https://www.creative-tim.com/"https:////unpkg.com//alpinejs@3.2.3//dist//cdn.min.js/"/r/n ><\/script>\r\n\r\n \r\n <\/head>\r\n <body class=\"bg-gray-50\" style=\"\">\r\n <header class=\"bg-white \">\r\n <div class=\"mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8\">\r\n <h1 class=\"text-3xl font-bold tracking-tight text-gray-900\">\r\n SafariHR\r\n <\/h1>\r\n <\/div>\r\n <\/header>\r\n <div class=\"min-h-full\">\r\n <nav class=\"bg-gray-800\">\r\n <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex h-16 items-center justify-between\">\r\n <div class=\"flex items-center\">\r\n \r\n <div class=\"hidden md:block\">\r\n <div class=\"ml-10 flex items-baseline space-x-4\">\r\n \r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium\"\r\n aria-current=\"page\"\r\n >Home<\/a\r\n >\r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium\"\r\n >My info<\/a\r\n >\r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium\"\r\n >Employees<\/a\r\n >\r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium\"\r\n >Pricing<\/a\r\n >\r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium\"\r\n >Blogs<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hidden md:block\">\r\n <div class=\"ml-4 flex items-center md:ml-6\">\r\n\r\n\r\n \r\n <div class=\"relative ml-3\">\r\n\r\n <div class=\"md:block lg:block sm:hidden max-w-md mx-auto\">\r\n <div\r\n class=\"relative flex items-center w-full h-8 border border-gray-500 rounded-sm bg-gray-600 overflow-hidden\"\r\n >\r\n <div\r\n class=\"grid place-items-center w-12 bg-gray-600 text-gray-300\"\r\n >\r\n <svg\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n class=\"h-6 w-6 bg-gray-600\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n >\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\r\n \/>\r\n <\/svg>\r\n <\/div>\r\n \r\n <input\r\n class=\"bg-gray-600 outline-none text-sm text-gray-300 pr-2\"\r\n type=\"text\"\r\n id=\"search\"\r\n placeholder=\"Search something..\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"md:hidden\" id=\"mobile-menu\">\r\n <div class=\"space-y-1 px-2 pb-3 pt-2 sm:px-3\">\r\n \r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium\"\r\n aria-current=\"page\"\r\n >Home<\/a\r\n >\r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium\"\r\n >My info<\/a\r\n >\r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium\"\r\n >Employees<\/a\r\n >\r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium\"\r\n >Pricing<\/a\r\n >\r\n <a\r\n href=https://www.creative-tim.com/"#\"\r\n class=\"text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium\"\r\n >Blogs<\/a\r\n >\r\n <\/div>\r\n <div class=\"border-t border-gray-700 pb-3 pt-4\">\r\n <div class=\"flex items-center px-5\">\r\n <div class=\"md:block lg:block sm:hidden max-w-md mx-auto\">\r\n <div\r\n class=\"relative flex items-center w-full h-8 border border-gray-500 rounded-sm bg-gray-600 overflow-hidden\"\r\n >\r\n <div\r\n class=\"grid place-items-center w-12 bg-gray-600 text-gray-300\"\r\n >\r\n <svg\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n class=\"h-6 w-6 bg-gray-600\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n >\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\r\n \/>\r\n <\/svg>\r\n <\/div>\r\n \r\n <input\r\n class=\"bg-gray-600 outline-none text-sm text-gray-300 pr-2\"\r\n type=\"text\"\r\n id=\"search\"\r\n placeholder=\"Search something..\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n<div class=\"bg-blue-300 flex justify-between\">\r\n<div class=\" max-w-7xl px-4 py-6 bg-blue-300 sm:px-6 lg:px-8 hidden lg:block md:block\">\r\n \r\n <img class=\" flex-1 w-48 h-48 rounded-full shadow-lg\" src=https://www.creative-tim.com/"https:////static.independent.co.uk//2023//09//14//15//WOLFPACK_Gallery_Kristin_10232022_FO_0064_aprRT.jpg?width=1200&height=1200&fit=crop\%22 alt=\"\">\r\n<\/div>\r\n <div class=\"bg-blue-300 max-w-7xl px-4 py-6 sm:px-6 lg:px-8\">\r\n <h1 class=\" text-3xl font-sans tracking-tight text-gray-900\">\r\n Charlot Daniel Abbot\r\n <\/h1>\r\n <p class=\"ml-10\">Sr. HR Administrator<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-blue-300 mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8\">\r\n\r\n <div class=\"flex justify-between\">\r\n \r\n \r\n <div class=\"flex-1\">\r\n \r\n <\/div>\r\n \r\n \r\n <div class=\"flex space-x-4 hidden lg:block md:block\">\r\n <button class=\"bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded-md\">Request a Change<\/button> \r\n <button class=\"bg-gray-500 hover:bg-gray-600 text-white px-2 py-1 rounded-md\">Settings<\/button>\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n <\/div>\r\n \r\n<\/div>\r\n <main>\r\n <div class=\" max-w-7xl py-0 \">\r\n <div class=\"md:flex no-wrap md:-mx-2 \">\r\n \r\n\r\n <div class=\" w-full md:w-3\/12 \">\r\n\r\n <div class=\" p-3 \">\r\n \r\n <ul class=\"-mt-3 text-sm font-semibold text-gray-500 hover:text-gray-700 py-2 px-3 mt-3 divide-y rounded bg-white \">\r\n <li class=\"items-center py-3\">\r\n <span>801-724-6600 Ext.1272<\/span><br\/>\r\n <span class=\"ml-auto\">415-555-8965<\/span>\r\n\r\n <\/li>\r\n <li class=\"items-center py-3\">\r\n <h1>Hire date<\/h1>\r\n <span>Jan 19 2017<\/span><br\/>\r\n <span class=\"ml-auto\">10m - 15d<\/span>\r\n <\/li>\r\n\r\n <li class=\" items-center py-3\">\r\n <span>Full-time<\/span><br\/>\r\n <span class=\"ml-auto\">Human Resources<\/span>\r\n <span class=\"ml-auto\">North America<\/span>\r\n <span class=\"ml-auto\">Lindon , Utah<\/span>\r\n\r\n\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"w-full mx-2 md:block lg:block md:-mt-24 sm:mt-0\">\r\n \r\n \r\n <div class=\"hidden md:block lg:block\">\r\n <ul class=\"flex bg-white \">\r\n <li class=\" mr-1\">\r\n <a class=\"rounded-sm bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold shadow-md\" href=https://www.creative-tim.com/"#\">Personal<\/a>\r\n <\/li>\r\n <li class=\"mr-1\">\r\n <a class=\"rounded-sm bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold\" href=https://www.creative-tim.com/"#\">Job<\/a>\r\n <\/li>\r\n <li class=\"mr-1\">\r\n <a class=\"rounded-sm bg-white inline-block py-2 px-4 border-l border-t border-r rounded-t py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold\" href=https://www.creative-tim.com/"#\">leave<\/a>\r\n <\/li>\r\n <li class=\"mr-1\">\r\n <a class=\"rounded-sm bg-white inline-block py-2 px-4 border-l border-t border-r rounded-t py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold\" href=https://www.creative-tim.com/"#\">Emergency<\/a>\r\n <\/li>\r\n <li class=\"mr-1\">\r\n <a class=\"rounded-sm bg-white inline-block py-2 px-4 border-l border-t border-r rounded-t py-2 px-1 text-blue-500 hover:text-blue-800 font-semibold\" href=https://www.creative-tim.com/"#\">Document<\/a>\r\n <\/li>\r\n <li class=\"mr-1\">\r\n <a class=\"rounded-sm bg-white inline-block py-2 px-4 border-l border-t border-r rounded-t py-2 px-1 text-blue-500 hover:text-blue-800 font-semibold\" href=https://www.creative-tim.com/"#\">Notes<\/a>\r\n <\/li>\r\n \r\n <li class=\"mr-1\">\r\n <a class=\"bg-white inline-block py-2 px-4 border-l border-t border-r rounded-t text-blue-500 hover:text-blue-800 font-semibold\" href=https://www.creative-tim.com/"#\">Benefits<\/a>\r\n <\/li>\r\n \r\n <li class=\"mr-1\">\r\n <a class=\"bg-white inline-block py-2 px-4 border-l border-t border-r rounded-t text-blue-500 hover:text-blue-800 font-semibold\" href=https://www.creative-tim.com/"#\">Training<\/a>\r\n <\/li>\r\n \r\n <li class=\"mr-1\">\r\n <a class=\"bg-white inline-block py-2 px-4 border-l border-t border-r rounded-t text-blue-500 hover:text-blue-800 font-semibold\" href=https://www.creative-tim.com/"#\">performance<\/a>\r\n <\/li>\r\n <li class=\"mr-1\">\r\n <a class=\"bg-white inline-block py-2 px-4 border-l border-t border-r rounded-t text-blue-500 hover:text-blue-800 font-semibold\" href=https://www.creative-tim.com/"#\">Assets<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-white p-3 rounded-sm \">\r\n \r\n <div class=\"flex items-center space-x-2 font-semibold text-gray-900 leading-8\">\r\n <span clas=\"text-green-500\">\r\n <svg class=\"h-5\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"><\/path>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"tracking-wide px-2\">Personal<\/span>\r\n <\/div>\r\n <div class=\"flex my-2 py-1\">\r\n <span class=\"tracking-wide px-2 bg-blue-500 text-white rounded-md shadow-xl\">Upload<\/span>\r\n <span class=\"tracking-wide px-2\">Files<\/span>\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n \r\n <div class=\"my-1 \"><\/div>\r\n \r\n <div class=\"inline-block min-w-full py-2 align-middle md:px-6 lg:px-8 sm:block \">\r\n <div class=\"overflow-hidden border border-gray-200 md:rounded-lg\">\r\n <table class=\"min-w-full divide-y divide-gray-200 \">\r\n \r\n <tbody class=\"bg-white divide-y divide-gray-200 \">\r\n <tr>\r\n <td class=\"px-4 py-4 text-sm font-medium \">\r\n <div>\r\n <h2 class=\"font-medium text-gray-800 \">Resume and Applications<\/h2>\r\n <\/div>\r\n <\/td>\r\n \r\n <tr>\r\n <td class=\"px-4 py-4 text-sm font-medium whitespace-nowrap\">\r\n <div>\r\n <h2 class=\"font-medium text-gray-800 \">Signed Documents<\/h2>\r\n \r\n <\/div>\r\n <\/td>\r\n \r\n \r\n <\/tr> <tr>\r\n <td class=\"px-4 py-4 text-sm font-medium whitespace-nowrap\">\r\n <div>\r\n <h2 class=\"font-medium text-gray-800 \">Tasklist Attachments<\/h2>\r\n \r\n <\/div>\r\n <\/td>\r\n \r\n \r\n <\/tr> \r\n <tr>\r\n <td class=\"px-4 py-4 text-sm font-medium whitespace-nowrap\">\r\n <div>\r\n <h2 class=\"font-medium text-gray-800 \">Workflow Attachments<\/h2>\r\n \r\n <\/div>\r\n <\/td>\r\n \r\n \r\n <\/tr>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n <\/body>\r\n<\/html>","author_type":"App\\User","author_id":2290,"collection_id":null,"fork_id":null,"votes":0,"score":"0.0","visits":4016,"popularity":345,"slug":"hr-dashboard","approved":1,"created_at":"2023-11-12T00:00:00.000000Z","updated_at":"2024-09-19T04:03:02.000000Z","downloads":115,"code_views":394,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":10742,"model_type":"App\\Component","model_id":5730,"collection_name":"preview","name":"temp10499","file_name":"temp10499.png","mime_type":"image\/png","disk":"public","size":136895,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp10499___media_library_original_1280_957.png","temp10499___media_library_original_1070_800.png","temp10499___media_library_original_896_670.png","temp10499___media_library_original_749_560.png","temp10499___media_library_original_627_469.png","temp10499___media_library_original_524_392.png","temp10499___media_library_original_439_328.png","temp10499___media_library_original_367_274.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEE3bndqOFMvR0d0YSs5akRjT0hIY2l2ZHAwS1U2amd6eTZsU3BDbXBvOU9TeitJc3VDTGg4ZlN1LzZqUS9tT0Q2NVY3RHB0UCtJcWdiYmh6K0ZhUnkvRDlaRXZHVnY1U3phMnZ4Q1pNUE80UDBxUHFOQy94RmZYS3R0ajJiU1BoRDRmMGk3TjViV3FKT2U0RmVFcThyM1BZZEpXc2QxcDloYnJHRktMeDdWaEtyTnZjMFVJOWk5OWd0ZitlYWZsUzlwUHVQa2oyR1MyVnNpNUVhZmxUVlNiZTRuQ0s2R1hraXVqbFJ6M1lvZGw2SEZMbFErWmkrYy84QWVOT3lEbVlHWnlPdE95RG1aLy9aIj4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":1,"created_at":"2023-11-12T16:40:22.000000Z","updated_at":"2023-11-12T16:40:24.000000Z","conversions_disk":"public","uuid":"db6732d7-2445-468e-b511-48d5f91165ee","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/10742\/temp10499.png","preview_url":""}],"author":{"id":2290,"name":"Nibeza kevin","slug":"nibeza-kevin","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/dbfbc1649ba2fcb89b5ca18eb8190102","header":null,"created_at":"2021-02-18T18:48:49.000000Z","updated_at":"2021-02-18T18:48:49.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":5730,"tag_id":38}}],"fork":null,"favorites":[{"id":19124,"name":"Dounder","slug":"dounder","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/62575186?v=4","header":null,"created_at":"2024-05-31T13:56:52.000000Z","updated_at":"2024-05-31T13:56:52.000000Z","pivot":{"component_id":5730,"user_id":19124}}]}" :edit="false"> Full screen Preview

Nibeza kevin

4 components

HR dashboard

Community Rate

Related components