Tailwind CSS Horizontal Admin Dashboard

Tailwind CSS dashboard page with Alpine JS, Chart JS

Share

/r/n <style>\r\n [x-cloak] {\r\n display: none !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"relative antialiased bg-gray-100\">\r\n \r\n <div class=\"fixed bottom-4 right-4 xl:right-20\">\r\n <a href=https://www.creative-tim.com/"https:////www.buymeacoffee.com//ejulfaey/" target=\"_blank\"\r\n class=\"transform duration-500 ease-in-out animate-bounce bg-yellow-400 px-4 py-3 font-mono font-semibold rounded-lg shadow hover:shadow-xl flex justify-between items-center gap-4\">\r\n <img class=\"w-8 h-8 rounded\"\r\n src=https://www.creative-tim.com/"https:////img.buymeacoffee.com//api//?name=Ejul&size=300&bg-image=bmc&background=5F7FFF\%22\r\n alt=\"buymeacoffee\">\r\n Buy Me A Coffee\r\n <\/a>\r\n <\/div>\r\n <nav class=\"p-4 md:py-8 xl:px-0 md:container md:mx-w-6xl md:mx-auto\">\r\n <div class=\"hidden lg:flex lg:justify-between lg:items-center\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-start gap-2 group\">\r\n <div class=\"bg-blue-600 text-white p-2 rounded-md group-hover:bg-blue-800\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"text-sm font-light uppercase\">\r\n Dashboard\r\n <span class=\"text-base block font-bold tracking-widest\">\r\n Atom\r\n <\/span>\r\n <\/p>\r\n <\/a>\r\n <ul class=\"flex items-center space-x-4 text-sm font-semibold\">\r\n <li><a href=https://www.creative-tim.com/"#\" class=\"px-2 xl:px-4 py-2 text-gray-800 rounded-md hover:bg-gray-200\">My Account<\/a><\/li>\r\n <li class=\"relative\" x-data=\"{ open: false }\">\r\n <a x-on:click=\"open = !open\" x-on:click.outside=\"open = false\" href=https://www.creative-tim.com/"#\"\r\n class=\"px-2 xl:px-4 py-2 text-gray-600 rounded-md hover:bg-gray-200 flex gap-2 items-center\">\r\n Transactions\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4 stroke-current stroke-2 text-gray-800 transform duration-500 ease-in-out\" :class=\"open ? 'rotate-90' : ''\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg> <\/a>\r\n <ul x-cloak x-show=\"open\" x-transition\r\n class=\"absolute top-10 left-0 bg-white p-4 rounded-md shadow overflow-hidden w-64\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"p-4 block text-sm text-gray-600 rounded flex items-center gap-2 hover:bg-gray-100\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg>\r\n Transaction ABC\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"p-4 block text-sm text-gray-600 rounded flex items-center gap-2 hover:bg-gray-100\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg>\r\n Transaction DEF\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"p-4 block text-sm text-gray-600 rounded flex items-center gap-2 hover:bg-gray-100\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg>\r\n Transaction GHI\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=https://www.creative-tim.com/"#\" class=\"px-2 xl:px-4 py-2 text-gray-600 rounded-md hover:bg-gray-200\">Cards <\/a><\/li>\r\n <li><a href=https://www.creative-tim.com/"#\" class=\"px-2 xl:px-4 py-2 text-gray-600 rounded-md hover:bg-gray-200\">Offers<\/a><\/li>\r\n <\/ul>\r\n <ul class=\"flex space-x-2 xl:space-x-4 text-sm font-semibold\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\">\r\n <div class=\"p-2 rounded hover:bg-gray-200\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4 stroke-current text-gray-800\"\r\n fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" \/>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\">\r\n <div class=\"p-2 rounded hover:bg-gray-200\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4 stroke-current text-gray-800\"\r\n fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\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 <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\">\r\n <div class=\"p-2 rounded hover:bg-gray-200\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4 stroke-current text-gray-800\"\r\n fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <ul class=\"flex items-center gap-6\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-sm font-sans text-gray-800 font-semibold tracking-wider\">\r\n Derol Hakim\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\">\r\n <div class=\"p-2 rounded hover:bg-gray-200\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-5 h-5 stroke-current text-gray-800\"\r\n fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\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 <\/div>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div x-data=\"{ open: false }\" class=\"lg:hidden relative flex justify-between w-full\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-start gap-2 group\">\r\n <div class=\"bg-blue-600 text-white p-3 rounded-md group-hover:bg-blue-800\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"text-sm font-light uppercase\">\r\n Dashboard\r\n <span class=\"text-base block font-bold tracking-widest\">\r\n Atom\r\n <\/span>\r\n <\/p>\r\n <\/a>\r\n <button x-on:click=\"open = !open\" type=\"button\" class=\"bg-gray-200 p-3 rounded-md\">\r\n <svg x-show=\"!open\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h7\" \/>\r\n <\/svg>\r\n <svg x-show=\"open\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\r\n <\/svg>\r\n <\/button>\r\n <div x-show=\"open\" x-transition class=\"absolute top-14 left-0 right-0 w-full bg-white rounded-md border\">\r\n <ul class=\"p-4\">\r\n <li class=\"px-4 py-2 rounded hover:bg-gray-200\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center gap-4\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg>\r\n My Account\r\n <\/a>\r\n <\/li>\r\n <li class=\"px-4 py-2 rounded hover:bg-gray-200\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center gap-4\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg>\r\n Transactions\r\n <\/a>\r\n <\/li>\r\n <li class=\"px-4 py-2 rounded hover:bg-gray-200\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center gap-4\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg>\r\n Cards\r\n <\/a>\r\n <\/li>\r\n <li class=\"px-4 py-2 rounded hover:bg-gray-200\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center gap-4\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" \/>\r\n <\/svg>\r\n Offers\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n \r\n \r\n <main class=\"container mx-w-6xl mx-auto py-4\">\r\n <div class=\"flex flex-col space-y-8\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-4 xl:grid-cols-5 px-4 xl:p-0 gap-y-4 md:gap-6\">\r\n <div class=\"md:col-span-2 xl:col-span-3 bg-white p-6 rounded-2xl border border-gray-50\">\r\n <div class=\"flex flex-col space-y-6 md:h-full md:justify-between\">\r\n <div class=\"flex justify-between\">\r\n <span class=\"text-xs text-gray-500 font-semibold uppercase tracking-wider\">\r\n Main Account\r\n <\/span>\r\n <span class=\"text-xs text-gray-500 font-semibold uppercase tracking-wider\">\r\n Available Funds\r\n <\/span>\r\n <\/div>\r\n <div class=\"flex gap-2 md:gap-4 justify-between items-center\">\r\n <div class=\"flex flex-col space-y-4\">\r\n <h2 class=\"text-gray-800 font-bold tracking-widest leading-tight\">Derol's Savings\r\n Account<\/h2>\r\n <div class=\"flex items-center gap-4\">\r\n <p class=\"text-lg text-gray-600 tracking-wider\">**** **** *321<\/p>\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\"\r\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M17 8l4 4m0 0l-4 4m4-4H3\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <h2 class=\"text-lg md:text-xl xl:text-3xl text-gray-700 font-black tracking-wider\">\r\n <span class=\"md:text-xl\">$<\/span>\r\n 92,817.45\r\n <\/h2>\r\n <\/div>\r\n <div class=\"flex gap-2 md:gap-4\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"bg-blue-600 px-5 py-3 w-full text-center md:w-auto rounded-lg text-white text-xs tracking-wider font-semibold hover:bg-blue-800\">\r\n Transfer Money\r\n <\/a>\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"bg-blue-50 px-5 py-3 w-full text-center md:w-auto rounded-lg text-blue-600 text-xs tracking-wider font-semibold hover:bg-blue-600 hover:text-white\">\r\n Link Account\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div\r\n class=\"col-span-2 p-6 rounded-2xl bg-gradient-to-r from-blue-500 to-blue-800 flex flex-col justify-between\">\r\n <div class=\"flex flex-col\">\r\n <p class=\"text-white font-bold\">Lorem ipsum dolor sit amet<\/p>\r\n <p class=\"mt-1 text-xs md:text-sm text-gray-50 font-light leading-tight max-w-sm\">\r\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio soluta saepe consequuntur\r\n facilis ab a. Molestiae ad saepe assumenda praesentium rem dolore? Exercitationem, neque\r\n obcaecati?\r\n <\/p>\r\n <\/div>\r\n <div class=\"flex justify-between items-end\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"bg-blue-800 px-4 py-3 rounded-lg text-white text-xs tracking-wider font-semibold hover:bg-blue-600 hover:text-white\">\r\n Learn More\r\n <\/a>\r\n <img src=https://www.creative-tim.com/"https:////atom.dzulfarizan.com//assets//calendar.png/" alt=\"calendar\" class=\"w-auto h-24 object-cover\">\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n \r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 px-4 xl:p-0 gap-4 xl:gap-6\">\r\n <div class=\"col-span-1 md:col-span-2 lg:col-span-4 flex justify-between\">\r\n <h2 class=\"text-xs md:text-sm text-gray-700 font-bold tracking-wide md:tracking-wider\">\r\n Expenses By Category<\/h2>\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-xs text-gray-800 font-semibold uppercase\">More<\/a>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl border border-gray-50\">\r\n <div class=\"flex justify-between items-start\">\r\n <div class=\"flex flex-col\">\r\n <p class=\"text-xs text-gray-600 tracking-wide\">Foods & Beverages<\/p>\r\n <h3 class=\"mt-1 text-lg text-blue-500 font-bold\">$ 818<\/h3>\r\n <span class=\"mt-4 text-xs text-gray-500\">Last Transaction 3 Hours ago<\/span>\r\n <\/div>\r\n <div class=\"bg-blue-500 p-2 md:p-1 xl:p-2 rounded-md\">\r\n <img src=https://www.creative-tim.com/"https:////atom.dzulfarizan.com//assets//dish-2.png/" alt=\"icon\" class=\"w-auto h-8 md:h-6 xl:h-8 object-cover\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl border border-gray-50\">\r\n <div class=\"flex justify-between items-start\">\r\n <div class=\"flex flex-col\">\r\n <p class=\"text-xs text-gray-600 tracking-wide\">Groceries<\/p>\r\n <h3 class=\"mt-1 text-lg text-green-500 font-bold\">$ 8,918<\/h3>\r\n <span class=\"mt-4 text-xs text-gray-500\">Last Transaction 3 Days ago<\/span>\r\n <\/div>\r\n <div class=\"bg-green-500 p-2 md:p-1 xl:p-2 rounded-md\">\r\n <img src=https://www.creative-tim.com/"https:////atom.dzulfarizan.com//assets//grocery.png/" alt=\"icon\" class=\"w-auto h-8 md:h-6 xl:h-8 object-cover\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl border border-gray-50\">\r\n <div class=\"flex justify-between items-start\">\r\n <div class=\"flex flex-col\">\r\n <p class=\"text-xs text-gray-600 tracking-wide\">Gaming<\/p>\r\n <h3 class=\"mt-1 text-lg text-yellow-500 font-bold\">$ 1,223<\/h3>\r\n <span class=\"mt-4 text-xs text-gray-600\">Last Transaction 4 Days ago<\/span>\r\n <\/div>\r\n <div class=\"bg-yellow-500 p-2 md:p-1 xl:p-2 rounded-md\">\r\n <img src=https://www.creative-tim.com/"https:////atom.dzulfarizan.com//assets//gaming.png/" alt=\"icon\" class=\"w-auto h-8 md:h-6 xl:h-8 object-cover\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-xl border border-gray-50\">\r\n <div class=\"flex justify-between items-start\">\r\n <div class=\"flex flex-col\">\r\n <p class=\"text-xs text-gray-600 tracking-wide\">Trip & Holiday<\/p>\r\n <h3 class=\"mt-1 text-lg text-indigo-500 font-bold\">$ 5,918<\/h3>\r\n <span class=\"mt-4 text-xs text-gray-500\">Last Transaction 1 Month ago<\/span>\r\n <\/div>\r\n <div class=\"bg-indigo-500 p-2 md:p-1 xl:p-2 rounded-md\">\r\n <img src=https://www.creative-tim.com/"https:////atom.dzulfarizan.com//assets//holiday.png/" alt=\"icon\" class=\"w-auto h-8 md:h-6 xl:h-8 object-cover\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-5 items-start px-4 xl:p-0 gap-y-4 md:gap-6\">\r\n <div class=\"col-start-1 col-end-5\">\r\n <h2 class=\"text-xs md:text-sm text-gray-800 font-bold tracking-wide\">Summary Transactions<\/h2>\r\n <\/div>\r\n <div class=\"col-span-2 bg-white p-6 rounded-xl border border-gray-50 flex flex-col space-y-6\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 flex justify-between items-center\">\r\n <div class=\"p-4 cursor-pointer border\">\r\n <span class=\"text-xs text-gray-500 font-semibold\">Daily<\/span>\r\n <h2 class=\"text-gray-800 font-bold tracking-wider\">$ 27.80<\/h2>\r\n <\/div>\r\n <div class=\"p-4 cursor-pointer border\">\r\n <span class=\"text-xs text-gray-500 font-semibold\">Weekly<\/span>\r\n <h2 class=\"text-gray-800 font-bold tracking-wider\">$ 192.92<\/h2>\r\n <\/div>\r\n <div class=\"p-4 cursor-pointer border\">\r\n <span class=\"text-xs text-gray-500 font-semibold\">Monthly<\/span>\r\n <h2 class=\"text-gray-800 font-bold tracking-wider\">$ 501.10<\/h2>\r\n <\/div>\r\n <\/div>\r\n <canvas id=\"myChart\"><\/canvas>\r\n <\/div>\r\n <div class=\"col-span-3 bg-white p-6 rounded-xl border border-gray-50 flex flex-col space-y-6\">\r\n <div class=\"flex justify-between items-center\">\r\n <h2 class=\"text-sm text-gray-600 font-bold tracking-wide\">Latest Transactions<\/h2>\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"px-4 py-2 text-xs bg-blue-100 text-blue-500 rounded uppercase tracking-wider font-semibold hover:bg-blue-300\">More<\/a>\r\n <\/div>\r\n <ul class=\"divide-y-2 divide-gray-100 overflow-x-auto w-full\">\r\n <li class=\"py-3 flex justify-between text-sm text-gray-500 font-semibold\">\r\n <p class=\"px-4 font-semibold\">Today<\/p>\r\n <p class=\"px-4 text-gray-600\">McDonald<\/p>\r\n <p class=\"px-4 tracking-wider\">Cash<\/p>\r\n <p class=\"px-4 text-blue-600\">Food<\/p>\r\n <p class=\"md:text-base text-gray-800 flex items-center gap-2\">\r\n 16.90\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M19 9l-7 7-7-7\" \/>\r\n <\/svg>\r\n <\/p>\r\n <\/li>\r\n <li class=\"py-3 flex justify-between text-sm text-gray-500 font-semibold\">\r\n <p class=\"px-4 font-semibold\">Today<\/p>\r\n <p class=\"px-4 text-gray-600\">McDonald<\/p>\r\n <p class=\"px-4 tracking-wider\">Cash<\/p>\r\n <p class=\"px-4 text-blue-600\">Food<\/p>\r\n <p class=\"md:text-base text-gray-800 flex items-center gap-2\">\r\n 16.90\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M19 9l-7 7-7-7\" \/>\r\n <\/svg>\r\n <\/p>\r\n <\/li>\r\n <li class=\"py-3 flex justify-between text-sm text-gray-500 font-semibold\">\r\n <p class=\"px-4 font-semibold\">Today<\/p>\r\n <p class=\"px-4 text-gray-600\">McDonald<\/p>\r\n <p class=\"px-4 tracking-wider\">Cash<\/p>\r\n <p class=\"px-4 text-blue-600\">Food<\/p>\r\n <p class=\"md:text-base text-gray-800 flex items-center gap-2\">\r\n 16.90\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M19 9l-7 7-7-7\" \/>\r\n <\/svg>\r\n <\/p>\r\n <\/li>\r\n <li class=\"py-3 flex justify-between text-sm text-gray-500 font-semibold\">\r\n <p class=\"px-4 font-semibold\">Today<\/p>\r\n <p class=\"px-4 text-gray-600\">McDonald<\/p>\r\n <p class=\"px-4 tracking-wider\">Cash<\/p>\r\n <p class=\"px-4 text-blue-600\">Food<\/p>\r\n <p class=\"md:text-base text-gray-800 flex items-center gap-2\">\r\n 16.90\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M19 9l-7 7-7-7\" \/>\r\n <\/svg>\r\n <\/p>\r\n <\/li>\r\n <li class=\"py-3 flex justify-between text-sm text-gray-500 font-semibold\">\r\n <p class=\"px-4 font-semibold\">Today<\/p>\r\n <p class=\"px-4 text-gray-600\">McDonald<\/p>\r\n <p class=\"px-4 tracking-wider\">Cash<\/p>\r\n <p class=\"px-4 text-blue-600\">Food<\/p>\r\n <p class=\"md:text-base text-gray-800 flex items-center gap-2\">\r\n 16.90\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M19 9l-7 7-7-7\" \/>\r\n <\/svg>\r\n <\/p>\r\n <\/li>\r\n <li class=\"py-3 flex justify-between text-sm text-gray-500 font-semibold\">\r\n <p class=\"px-4 font-semibold\">Today<\/p>\r\n <p class=\"px-4 text-gray-600\">McDonald<\/p>\r\n <p class=\"px-4 tracking-wider\">Cash<\/p>\r\n <p class=\"px-4 text-blue-600\">Food<\/p>\r\n <p class=\"md:text-base text-gray-800 flex items-center gap-2\">\r\n 16.90\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M19 9l-7 7-7-7\" \/>\r\n <\/svg>\r\n <\/p>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/main>\r\n \r\n <script src=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//npm//chart.js@3.6.2//dist//chart.min.js/">/r/n <script>\r\n const ctx = document.getElementById('myChart').getContext('2d');\r\n\r\n const data = https://www.creative-tim.com/twcomponents/component/{/r/n labels: [\r\n 'Food & beverages',\r\n 'Groceries',\r\n 'Gaming',\r\n 'Trip & holiday',\r\n ],\r\n datasets: [{\r\n label: 'Total Expenses',\r\n data: [148, 150, 130, 170],\r\n backgroundColor: [\r\n '#3B82F6',\r\n '#10B981',\r\n '#6366F1',\r\n '#F59E0B'\r\n ]\r\n }]\r\n };\r\n\r\n const config = {\r\n type: 'polarArea',\r\n data: data,\r\n options: {\r\n plugins: {\r\n legend: {\r\n position: 'bottom',\r\n },\r\n }\r\n }\r\n };\r\n\r\n const chart = new Chart(ctx, config);\r\n <\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>","author_type":"App\\User","author_id":6083,"collection_id":null,"fork_id":null,"votes":6,"score":"4.2","visits":10002,"popularity":840,"slug":"simple-admin-dashboard","approved":1,"created_at":"2021-12-07T20:14:29.000000Z","updated_at":"2024-09-19T03:28:56.000000Z","downloads":170,"code_views":1072,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":8718,"model_type":"App\\Component","model_id":2738,"collection_name":"preview","name":"temp94637","file_name":"temp94637.png","mime_type":"image\/png","disk":"public","size":147800,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp94637___media_library_original_1280_957.png","temp94637___media_library_original_1070_800.png","temp94637___media_library_original_896_670.png","temp94637___media_library_original_749_560.png","temp94637___media_library_original_627_469.png","temp94637___media_library_original_524_392.png","temp94637___media_library_original_439_328.png","temp94637___media_library_original_367_274.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUm16MHRMU01JdlFWNnNwT1R1enprckZnd0RHS2taYnNpSVJqdFhMVXZjNmFleDhXZnRwNnBOWjZrUEtiYnhYNnh3eFRqS2hxZkk1bkpxcm9mWjlmbUo5S0kzU2dESHZiYTZhOGpramxLeGc4Z1Z2R2NGRnFTSmFsZTZaNUY4YS9nSWZpcGNwS1ppbUJ6WHVaWm5pd01lU3h3MThDOFErWTkycjV3OUFSdWxBQ2JDRjNFWkZjOVNhaWJ3anpGV0RWb0pidjdPbytldkVqbU5HVlgyZlU3dnEwNHc1ai8vWiI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":8531,"created_at":"2023-02-03T13:46:02.000000Z","updated_at":"2023-02-03T13:46:06.000000Z","conversions_disk":"public","uuid":"04beb145-6b44-4cc4-a716-14ecc72cc48c","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8718\/temp94637.png","preview_url":""}],"author":{"id":6083,"name":"ejulfaey","slug":"ejulfaey","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/15130147?v=4","header":null,"created_at":"2021-12-07T20:14:57.000000Z","updated_at":"2021-12-07T20:14:57.000000Z"},"tags":[{"id":3,"name":{"en":"Navigations"},"description":"Looking to ensure a predictable and consistent user experience on your website? Check out our 200+ navigation examples that are built using the most popular utility-first CSS framework and choose the one that suits your needs.","meta_description":"Choose from 200+ navigation examples that are built using the most popular utility-first CSS framework - Tailwind UI.","slug":{"en":"navigations"},"type":null,"order_column":9,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:12:24.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2738,"tag_id":3}},{"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":2738,"tag_id":7}},{"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":2738,"tag_id":38}},{"id":76,"name":{"en":"Charts"},"description":"Create stunning data visualizations effortlessly using Tailwind CSS Chart Components. Enhance your web apps with beautiful charts and graphs.","meta_description":"Visit our Tailwind CSS Chart component examples that you can add to your web project to create awesome web apps.","slug":{"en":"charts"},"type":null,"order_column":65,"created_at":"2023-10-16T13:57:35.000000Z","updated_at":"2023-10-16T13:57:35.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2738,"tag_id":76}}],"fork":null,"favorites":[{"id":368,"name":"khatabwedaa","slug":"khatabwedaa","bio":"Web designer & developer https:\/\/merakiui.com.","avatar":"\/storage\/avatars\/ckQ2aybMQQJgUPv1HOe9XbpNmQmltLlWyy4CSVuJ.jpg","header":"\/storage\/headers\/mGwrFeXBOBPoz7DhAt98sH59byb7HUxdsTd3tVYB.png","created_at":"2020-02-15T10:59:29.000000Z","updated_at":"2023-05-01T07:26:40.000000Z","pivot":{"component_id":2738,"user_id":368}},{"id":5082,"name":"Peakcool852","slug":"peakcool852","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1343150178480484352\/0aMFnYbe_normal.jpg","header":null,"created_at":"2021-09-17T02:35:41.000000Z","updated_at":"2021-09-17T02:35:41.000000Z","pivot":{"component_id":2738,"user_id":5082}},{"id":3038,"name":"lohnsonok","slug":"lohnsonok","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/60504466?v=4","header":null,"created_at":"2021-04-11T20:40:20.000000Z","updated_at":"2021-04-11T20:40:20.000000Z","pivot":{"component_id":2738,"user_id":3038}},{"id":1447,"name":"mattdanielbrown","slug":"mattdanielbrown","bio":null,"avatar":"https:\/\/avatars3.githubusercontent.com\/u\/19757863?v=4","header":null,"created_at":"2020-10-29T16:32:49.000000Z","updated_at":"2020-10-29T16:32:49.000000Z","pivot":{"component_id":2738,"user_id":1447}},{"id":6025,"name":"pixelagil","slug":"pixelagil","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1443122381371977728\/6dm7Gipg_normal.jpg","header":null,"created_at":"2021-12-02T20:30:42.000000Z","updated_at":"2021-12-02T20:30:42.000000Z","pivot":{"component_id":2738,"user_id":6025}},{"id":5126,"name":"Maaaathis","slug":"maaaathis","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/37186532?v=4","header":null,"created_at":"2021-09-20T21:13:28.000000Z","updated_at":"2021-09-20T21:13:28.000000Z","pivot":{"component_id":2738,"user_id":5126}},{"id":6113,"name":"Gusta14Dev","slug":"gusta14dev","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/33584132?v=4","header":null,"created_at":"2021-12-10T18:33:16.000000Z","updated_at":"2021-12-10T18:33:16.000000Z","pivot":{"component_id":2738,"user_id":6113}},{"id":6135,"name":"godgodwinter","slug":"godgodwinter","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/74765757?v=4","header":null,"created_at":"2021-12-13T10:07:16.000000Z","updated_at":"2021-12-13T10:07:16.000000Z","pivot":{"component_id":2738,"user_id":6135}},{"id":5673,"name":"ZakHargz","slug":"zakhargz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/54669265?v=4","header":null,"created_at":"2021-11-03T19:42:58.000000Z","updated_at":"2021-11-03T19:42:58.000000Z","pivot":{"component_id":2738,"user_id":5673}},{"id":6177,"name":"bfhobbes","slug":"bfhobbes","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/47397734?v=4","header":null,"created_at":"2021-12-16T01:47:11.000000Z","updated_at":"2021-12-16T01:47:11.000000Z","pivot":{"component_id":2738,"user_id":6177}},{"id":6194,"name":"Akash","slug":"akash","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/786700e0f045e5574a25bf8acf281ec8","header":null,"created_at":"2021-12-16T19:18:47.000000Z","updated_at":"2021-12-16T19:18:47.000000Z","pivot":{"component_id":2738,"user_id":6194}},{"id":6225,"name":"CArson","slug":"carson","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/46b49402b61e8a33fe71f87d27217c0a","header":null,"created_at":"2021-12-20T06:23:05.000000Z","updated_at":"2021-12-20T06:23:05.000000Z","pivot":{"component_id":2738,"user_id":6225}},{"id":6229,"name":"marcotas","slug":"marcotas","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/3236791?v=4","header":null,"created_at":"2021-12-20T14:11:43.000000Z","updated_at":"2021-12-20T14:11:43.000000Z","pivot":{"component_id":2738,"user_id":6229}},{"id":6235,"name":"amass234","slug":"amass234","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/37824284?v=4","header":null,"created_at":"2021-12-21T01:54:18.000000Z","updated_at":"2021-12-21T01:54:18.000000Z","pivot":{"component_id":2738,"user_id":6235}},{"id":5627,"name":"Santiago Gorbea","slug":"santiago-gorbea","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/5938d6d330ce5376c798916e884162c8","header":null,"created_at":"2021-10-30T20:37:34.000000Z","updated_at":"2021-10-30T20:37:34.000000Z","pivot":{"component_id":2738,"user_id":5627}},{"id":6261,"name":"Ramon","slug":"ramon","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/3cc5485eba6cb6bcef9b74ca7488af35","header":null,"created_at":"2021-12-23T22:58:36.000000Z","updated_at":"2021-12-23T22:58:36.000000Z","pivot":{"component_id":2738,"user_id":6261}},{"id":1863,"name":"EgoistDeveloper","slug":"egoistdeveloper","bio":"Converting HTML tailwind templates to SASS use this tool \ud83d\udc49 https:\/\/egoistdeveloper.github.io\/twcss-to-sass-playground \ud83c\udf89 see my all components at here https:\/\/github.com\/EgoistDeveloper\/my-tailwind-components","avatar":"https:\/\/avatars0.githubusercontent.com\/u\/17010054?v=4","header":null,"created_at":"2020-12-30T23:41:30.000000Z","updated_at":"2022-09-05T21:16:39.000000Z","pivot":{"component_id":2738,"user_id":1863}},{"id":6298,"name":"HanirTxZ","slug":"hanirtxz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/73894490?v=4","header":null,"created_at":"2021-12-27T19:23:40.000000Z","updated_at":"2021-12-27T19:23:40.000000Z","pivot":{"component_id":2738,"user_id":6298}},{"id":5666,"name":"LPX55","slug":"lpx55","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/16395727?v=4","header":null,"created_at":"2021-11-03T09:50:17.000000Z","updated_at":"2021-11-03T09:50:17.000000Z","pivot":{"component_id":2738,"user_id":5666}},{"id":6401,"name":"amck96","slug":"amck96","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/39336910?v=4","header":null,"created_at":"2022-01-05T20:10:40.000000Z","updated_at":"2022-01-05T20:10:40.000000Z","pivot":{"component_id":2738,"user_id":6401}},{"id":6458,"name":"yaqubmw","slug":"yaqubmw","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/84486962?v=4","header":null,"created_at":"2022-01-10T13:37:22.000000Z","updated_at":"2022-01-10T13:37:22.000000Z","pivot":{"component_id":2738,"user_id":6458}},{"id":6558,"name":"ana2002granada","slug":"ana2002granada","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/72315746?v=4","header":null,"created_at":"2022-01-17T22:54:49.000000Z","updated_at":"2022-01-17T22:54:49.000000Z","pivot":{"component_id":2738,"user_id":6558}},{"id":6641,"name":"fhlarif","slug":"fhlarif","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/52021217?v=4","header":null,"created_at":"2022-01-24T09:51:23.000000Z","updated_at":"2022-01-24T09:51:23.000000Z","pivot":{"component_id":2738,"user_id":6641}},{"id":6695,"name":"Arijul Islam","slug":"arijul-islam","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/da91634e524611ff5f75e818755e9b92","header":null,"created_at":"2022-01-27T19:24:22.000000Z","updated_at":"2022-01-27T19:24:22.000000Z","pivot":{"component_id":2738,"user_id":6695}},{"id":6083,"name":"ejulfaey","slug":"ejulfaey","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/15130147?v=4","header":null,"created_at":"2021-12-07T20:14:57.000000Z","updated_at":"2021-12-07T20:14:57.000000Z","pivot":{"component_id":2738,"user_id":6083}},{"id":8006,"name":"Arstman","slug":"arstman-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/14262700?v=4","header":null,"created_at":"2022-05-30T23:43:08.000000Z","updated_at":"2022-05-30T23:43:08.000000Z","pivot":{"component_id":2738,"user_id":8006}},{"id":3526,"name":"dsursulino","slug":"dsursulino","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/2229631?v=4","header":null,"created_at":"2021-05-22T14:47:41.000000Z","updated_at":"2021-05-22T14:47:41.000000Z","pivot":{"component_id":2738,"user_id":3526}},{"id":7066,"name":"Yash Jain","slug":"yash-jain","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/6d909c3ca3cb137a24fb329dd1325fa4","header":null,"created_at":"2022-03-03T18:02:18.000000Z","updated_at":"2022-03-03T18:02:18.000000Z","pivot":{"component_id":2738,"user_id":7066}},{"id":9406,"name":"alexandermitsyk","slug":"alexandermitsyk","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/15364563?v=4","header":null,"created_at":"2022-10-17T11:33:48.000000Z","updated_at":"2022-10-17T11:33:48.000000Z","pivot":{"component_id":2738,"user_id":9406}},{"id":9537,"name":"yyp2003net","slug":"yyp2003net","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/3375665?v=4","header":null,"created_at":"2022-10-28T01:13:03.000000Z","updated_at":"2022-10-28T01:13:03.000000Z","pivot":{"component_id":2738,"user_id":9537}},{"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":2738,"user_id":4536}},{"id":9030,"name":"zariyatyasin","slug":"zariyatyasin","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/64485419?v=4","header":null,"created_at":"2022-09-12T18:44:11.000000Z","updated_at":"2022-09-12T18:44:11.000000Z","pivot":{"component_id":2738,"user_id":9030}},{"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":2738,"user_id":11775}},{"id":12275,"name":"Katoemma","slug":"katoemma","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/103442484?v=4","header":null,"created_at":"2023-05-08T15:54:07.000000Z","updated_at":"2023-05-08T15:54:07.000000Z","pivot":{"component_id":2738,"user_id":12275}},{"id":11388,"name":"Bryan","slug":"bryan-2","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/01a4d7c44decc5dd08b16d5cf0a38f13","header":null,"created_at":"2023-03-10T22:05:04.000000Z","updated_at":"2023-03-10T22:05:04.000000Z","pivot":{"component_id":2738,"user_id":11388}},{"id":12892,"name":"Ian","slug":"ian-1","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/ba838714515cc31b167caad677033c56","header":null,"created_at":"2023-06-23T07:50:03.000000Z","updated_at":"2023-06-23T07:50:03.000000Z","pivot":{"component_id":2738,"user_id":12892}},{"id":13092,"name":"patinthehat","slug":"patinthehat","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/5508707?v=4","header":null,"created_at":"2023-07-05T22:32:33.000000Z","updated_at":"2023-07-05T22:32:33.000000Z","pivot":{"component_id":2738,"user_id":13092}},{"id":14217,"name":"cherrot","slug":"cherrot","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/964629?v=4","header":null,"created_at":"2023-09-18T08:57:54.000000Z","updated_at":"2023-09-18T08:57:54.000000Z","pivot":{"component_id":2738,"user_id":14217}},{"id":15417,"name":"arg3ni5","slug":"arg3ni5","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/12776890?v=4","header":null,"created_at":"2023-11-23T14:35:07.000000Z","updated_at":"2023-11-23T14:35:07.000000Z","pivot":{"component_id":2738,"user_id":15417}},{"id":20248,"name":"Luka \u0160ilti\u0107","slug":"luka-siltic","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/936d2918736bcb6b1906a107e21bdae0","header":null,"created_at":"2024-08-22T20:23:02.000000Z","updated_at":"2024-08-22T20:23:02.000000Z","pivot":{"component_id":2738,"user_id":20248}}]}" :edit="false"> Full screen Preview

ejulfaey

1 component Profile On

Tailwind CSS Horizontal Admin Dashboard

Community Rate

Related components