[email protected]

Tailwind CSS Admin Panel

By 123ApplePie

Responsive Admin Panel

Share

tailwind-logo

Low Code

Soft UI Dashboard
Tailwind Builder
/r/n <link href=https://www.creative-tim.com/"https:////fonts.bunny.net//css?family=figtree:400,500,600&display=swap\%22 rel=\"stylesheet\" \/>\r\n <link href=https://www.creative-tim.com/twcomponents/component/'https:////unpkg.com//boxicons@2.1.4//css//boxicons.min.css' rel='stylesheet'>\r\n <link href=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//npm//remixicon@3.5.0//fonts//remixicon.css/" rel=\"stylesheet\">\r\n <script src=https://www.creative-tim.com/"https:////cdn.tailwindcss.com/">/r/n/r/n <title>Admin Panel<\/title>\r\n\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');\r\n\r\n\/*\r\n! tailwindcss v3.3.3 | MIT License | https:\/\/tailwindcss.com\r\n*\/\r\n\r\n\/*\r\n1. Prevent padding and border from affecting element width. (https:\/\/github.com\/mozdevs\/cssremedy\/issues\/4)\r\n2. Allow adding a border to an element by just adding a border-width. (https:\/\/github.com\/tailwindcss\/tailwindcss\/pull\/116)\r\n*\/\r\n\r\n*,\r\n::before,\r\n::after {\r\n box-sizing: border-box;\r\n \/* 1 *\/\r\n border-width: 0;\r\n \/* 2 *\/\r\n border-style: solid;\r\n \/* 2 *\/\r\n border-color: #e5e7eb;\r\n \/* 2 *\/\r\n}\r\n\r\n::before,\r\n::after {\r\n --tw-content: '';\r\n}\r\n\r\n\/*\r\n1. Use a consistent sensible line-height in all browsers.\r\n2. Prevent adjustments of font size after orientation changes in iOS.\r\n3. Use a more readable tab size.\r\n4. Use the user's configured `sans` font-family by default.\r\n5. Use the user's configured `sans` font-feature-settings by default.\r\n6. Use the user's configured `sans` font-variation-settings by default.\r\n*\/\r\n\r\nhtml {\r\n line-height: 1.5;\r\n \/* 1 *\/\r\n -webkit-text-size-adjust: 100%;\r\n \/* 2 *\/\r\n -moz-tab-size: 4;\r\n \/* 3 *\/\r\n -o-tab-size: 4;\r\n tab-size: 4;\r\n \/* 3 *\/\r\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\r\n \/* 4 *\/\r\n font-feature-settings: normal;\r\n \/* 5 *\/\r\n font-variation-settings: normal;\r\n \/* 6 *\/\r\n}\r\n\r\n\/*\r\n1. Remove the margin in all browsers.\r\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\r\n*\/\r\n\r\nbody {\r\n margin: 0;\r\n \/* 1 *\/\r\n line-height: inherit;\r\n \/* 2 *\/\r\n}\r\n\r\n\/*\r\n1. Add the correct height in Firefox.\r\n2. Correct the inheritance of border color in Firefox. (https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=190655)\r\n3. Ensure horizontal rules are visible by default.\r\n*\/\r\n\r\nhr {\r\n height: 0;\r\n \/* 1 *\/\r\n color: inherit;\r\n \/* 2 *\/\r\n border-top-width: 1px;\r\n \/* 3 *\/\r\n}\r\n\r\n\/*\r\nAdd the correct text decoration in Chrome, Edge, and Safari.\r\n*\/\r\n\r\nabbr:where([title]) {\r\n -webkit-text-decoration: underline dotted;\r\n text-decoration: underline dotted;\r\n}\r\n\r\n\/*\r\nRemove the default font size and weight for headings.\r\n*\/\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n font-size: inherit;\r\n font-weight: inherit;\r\n}\r\n\r\n\/*\r\nReset links to optimize for opt-in styling instead of opt-out.\r\n*\/\r\n\r\na {\r\n color: inherit;\r\n text-decoration: inherit;\r\n}\r\n\r\n\/*\r\nAdd the correct font weight in Edge and Safari.\r\n*\/\r\n\r\nb,\r\nstrong {\r\n font-weight: bolder;\r\n}\r\n\r\n\/*\r\n1. Use the user's configured `mono` font family by default.\r\n2. Correct the odd `em` font sizing in all browsers.\r\n*\/\r\n\r\ncode,\r\nkbd,\r\nsamp,\r\npre {\r\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\r\n \/* 1 *\/\r\n font-size: 1em;\r\n \/* 2 *\/\r\n}\r\n\r\n\/*\r\nAdd the correct font size in all browsers.\r\n*\/\r\n\r\nsmall {\r\n font-size: 80%;\r\n}\r\n\r\n\/*\r\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\r\n*\/\r\n\r\nsub,\r\nsup {\r\n font-size: 75%;\r\n line-height: 0;\r\n position: relative;\r\n vertical-align: baseline;\r\n}\r\n\r\nsub {\r\n bottom: -0.25em;\r\n}\r\n\r\nsup {\r\n top: -0.5em;\r\n}\r\n\r\n\/*\r\n1. Remove text indentation from table contents in Chrome and Safari. (https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=999088, https:\/\/bugs.webkit.org\/show_bug.cgi?id=201297)\r\n2. Correct table border color inheritance in all Chrome and Safari. (https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=935729, https:\/\/bugs.webkit.org\/show_bug.cgi?id=195016)\r\n3. Remove gaps between table borders by default.\r\n*\/\r\n\r\ntable {\r\n text-indent: 0;\r\n \/* 1 *\/\r\n border-color: inherit;\r\n \/* 2 *\/\r\n border-collapse: collapse;\r\n \/* 3 *\/\r\n}\r\n\r\n\/*\r\n1. Change the font styles in all browsers.\r\n2. Remove the margin in Firefox and Safari.\r\n3. Remove default padding in all browsers.\r\n*\/\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n font-family: inherit;\r\n \/* 1 *\/\r\n font-feature-settings: inherit;\r\n \/* 1 *\/\r\n font-variation-settings: inherit;\r\n \/* 1 *\/\r\n font-size: 100%;\r\n \/* 1 *\/\r\n font-weight: inherit;\r\n \/* 1 *\/\r\n line-height: inherit;\r\n \/* 1 *\/\r\n color: inherit;\r\n \/* 1 *\/\r\n margin: 0;\r\n \/* 2 *\/\r\n padding: 0;\r\n \/* 3 *\/\r\n}\r\n\r\n\/*\r\nRemove the inheritance of text transform in Edge and Firefox.\r\n*\/\r\n\r\nbutton,\r\nselect {\r\n text-transform: none;\r\n}\r\n\r\n\/*\r\n1. Correct the inability to style clickable types in iOS and Safari.\r\n2. Remove default button styles.\r\n*\/\r\n\r\nbutton,\r\n[type='button'],\r\n[type='reset'],\r\n[type='submit'] {\r\n -webkit-appearance: button;\r\n \/* 1 *\/\r\n background-color: transparent;\r\n \/* 2 *\/\r\n background-image: none;\r\n \/* 2 *\/\r\n}\r\n\r\n\/*\r\nUse the modern Firefox focus style for all focusable elements.\r\n*\/\r\n\r\n:-moz-focusring {\r\n outline: auto;\r\n}\r\n\r\n\/*\r\nRemove the additional `:invalid` styles in Firefox. (https:\/\/github.com\/mozilla\/gecko-dev\/blob\/2f9eacd9d3d995c937b4251a5557d95d494c9be1\/layout\/style\/res\/forms.css#L728-L737)\r\n*\/\r\n\r\n:-moz-ui-invalid {\r\n box-shadow: none;\r\n}\r\n\r\n\/*\r\nAdd the correct vertical alignment in Chrome and Firefox.\r\n*\/\r\n\r\nprogress {\r\n vertical-align: baseline;\r\n}\r\n\r\n\/*\r\nCorrect the cursor style of increment and decrement buttons in Safari.\r\n*\/\r\n\r\n::-webkit-inner-spin-button,\r\n::-webkit-outer-spin-button {\r\n height: auto;\r\n}\r\n\r\n\/*\r\n1. Correct the odd appearance in Chrome and Safari.\r\n2. Correct the outline style in Safari.\r\n*\/\r\n\r\n[type='search'] {\r\n -webkit-appearance: textfield;\r\n \/* 1 *\/\r\n outline-offset: -2px;\r\n \/* 2 *\/\r\n}\r\n\r\n\/*\r\nRemove the inner padding in Chrome and Safari on macOS.\r\n*\/\r\n\r\n::-webkit-search-decoration {\r\n -webkit-appearance: none;\r\n}\r\n\r\n\/*\r\n1. Correct the inability to style clickable types in iOS and Safari.\r\n2. Change font properties to `inherit` in Safari.\r\n*\/\r\n\r\n::-webkit-file-upload-button {\r\n -webkit-appearance: button;\r\n \/* 1 *\/\r\n font: inherit;\r\n \/* 2 *\/\r\n}\r\n\r\n\/*\r\nAdd the correct display in Chrome and Safari.\r\n*\/\r\n\r\nsummary {\r\n display: list-item;\r\n}\r\n\r\n\/*\r\nRemoves the default spacing and border for appropriate elements.\r\n*\/\r\n\r\nblockquote,\r\ndl,\r\ndd,\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\nhr,\r\nfigure,\r\np,\r\npre {\r\n margin: 0;\r\n}\r\n\r\nfieldset {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nlegend {\r\n padding: 0;\r\n}\r\n\r\nol,\r\nul,\r\nmenu {\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n\/*\r\nReset default styling for dialogs.\r\n*\/\r\n\r\ndialog {\r\n padding: 0;\r\n}\r\n\r\n\/*\r\nPrevent resizing textareas horizontally by default.\r\n*\/\r\n\r\ntextarea {\r\n resize: vertical;\r\n}\r\n\r\n\/*\r\n1. Reset the default placeholder opacity in Firefox. (https:\/\/github.com\/tailwindlabs\/tailwindcss\/issues\/3300)\r\n2. Set the default placeholder color to the user's configured gray 400 color.\r\n*\/\r\n\r\ninput::-moz-placeholder, textarea::-moz-placeholder {\r\n opacity: 1;\r\n \/* 1 *\/\r\n color: #9ca3af;\r\n \/* 2 *\/\r\n}\r\n\r\ninput::placeholder,\r\ntextarea::placeholder {\r\n opacity: 1;\r\n \/* 1 *\/\r\n color: #9ca3af;\r\n \/* 2 *\/\r\n}\r\n\r\n\/*\r\nSet the default cursor for buttons.\r\n*\/\r\n\r\nbutton,\r\n[role=\"button\"] {\r\n cursor: pointer;\r\n}\r\n\r\n\/*\r\nMake sure disabled buttons don't get the pointer cursor.\r\n*\/\r\n\r\n:disabled {\r\n cursor: default;\r\n}\r\n\r\n\/*\r\n1. Make replaced elements `display: block` by default. (https:\/\/github.com\/mozdevs\/cssremedy\/issues\/14)\r\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https:\/\/github.com\/jensimmons\/cssremedy\/issues\/14#issuecomment-634934210)\r\n This can trigger a poorly considered lint error in some tools but is included by design.\r\n*\/\r\n\r\nimg,\r\nsvg,\r\nvideo,\r\ncanvas,\r\naudio,\r\niframe,\r\nembed,\r\nobject {\r\n display: block;\r\n \/* 1 *\/\r\n vertical-align: middle;\r\n \/* 2 *\/\r\n}\r\n\r\n\/*\r\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https:\/\/github.com\/mozdevs\/cssremedy\/issues\/14)\r\n*\/\r\n\r\nimg,\r\nvideo {\r\n max-width: 100%;\r\n height: auto;\r\n}\r\n\r\n\/* Make elements with the HTML hidden attribute stay hidden by default *\/\r\n\r\n[hidden] {\r\n display: none;\r\n}\r\n\r\n*, ::before, ::after{\r\n --tw-border-spacing-x: 0;\r\n --tw-border-spacing-y: 0;\r\n --tw-translate-x: 0;\r\n --tw-translate-y: 0;\r\n --tw-rotate: 0;\r\n --tw-skew-x: 0;\r\n --tw-skew-y: 0;\r\n --tw-scale-x: 1;\r\n --tw-scale-y: 1;\r\n --tw-pan-x: ;\r\n --tw-pan-y: ;\r\n --tw-pinch-zoom: ;\r\n --tw-scroll-snap-strictness: proximity;\r\n --tw-gradient-from-position: ;\r\n --tw-gradient-via-position: ;\r\n --tw-gradient-to-position: ;\r\n --tw-ordinal: ;\r\n --tw-slashed-zero: ;\r\n --tw-numeric-figure: ;\r\n --tw-numeric-spacing: ;\r\n --tw-numeric-fraction: ;\r\n --tw-ring-inset: ;\r\n --tw-ring-offset-width: 0px;\r\n --tw-ring-offset-color: #fff;\r\n --tw-ring-color: rgb(59 130 246 \/ 0.5);\r\n --tw-ring-offset-shadow: 0 0 #0000;\r\n --tw-ring-shadow: 0 0 #0000;\r\n --tw-shadow: 0 0 #0000;\r\n --tw-shadow-colored: 0 0 #0000;\r\n --tw-blur: ;\r\n --tw-brightness: ;\r\n --tw-contrast: ;\r\n --tw-grayscale: ;\r\n --tw-hue-rotate: ;\r\n --tw-invert: ;\r\n --tw-saturate: ;\r\n --tw-sepia: ;\r\n --tw-drop-shadow: ;\r\n --tw-backdrop-blur: ;\r\n --tw-backdrop-brightness: ;\r\n --tw-backdrop-contrast: ;\r\n --tw-backdrop-grayscale: ;\r\n --tw-backdrop-hue-rotate: ;\r\n --tw-backdrop-invert: ;\r\n --tw-backdrop-opacity: ;\r\n --tw-backdrop-saturate: ;\r\n --tw-backdrop-sepia: ;\r\n}\r\n\r\n::backdrop{\r\n --tw-border-spacing-x: 0;\r\n --tw-border-spacing-y: 0;\r\n --tw-translate-x: 0;\r\n --tw-translate-y: 0;\r\n --tw-rotate: 0;\r\n --tw-skew-x: 0;\r\n --tw-skew-y: 0;\r\n --tw-scale-x: 1;\r\n --tw-scale-y: 1;\r\n --tw-pan-x: ;\r\n --tw-pan-y: ;\r\n --tw-pinch-zoom: ;\r\n --tw-scroll-snap-strictness: proximity;\r\n --tw-gradient-from-position: ;\r\n --tw-gradient-via-position: ;\r\n --tw-gradient-to-position: ;\r\n --tw-ordinal: ;\r\n --tw-slashed-zero: ;\r\n --tw-numeric-figure: ;\r\n --tw-numeric-spacing: ;\r\n --tw-numeric-fraction: ;\r\n --tw-ring-inset: ;\r\n --tw-ring-offset-width: 0px;\r\n --tw-ring-offset-color: #fff;\r\n --tw-ring-color: rgb(59 130 246 \/ 0.5);\r\n --tw-ring-offset-shadow: 0 0 #0000;\r\n --tw-ring-shadow: 0 0 #0000;\r\n --tw-shadow: 0 0 #0000;\r\n --tw-shadow-colored: 0 0 #0000;\r\n --tw-blur: ;\r\n --tw-brightness: ;\r\n --tw-contrast: ;\r\n --tw-grayscale: ;\r\n --tw-hue-rotate: ;\r\n --tw-invert: ;\r\n --tw-saturate: ;\r\n --tw-sepia: ;\r\n --tw-drop-shadow: ;\r\n --tw-backdrop-blur: ;\r\n --tw-backdrop-brightness: ;\r\n --tw-backdrop-contrast: ;\r\n --tw-backdrop-grayscale: ;\r\n --tw-backdrop-hue-rotate: ;\r\n --tw-backdrop-invert: ;\r\n --tw-backdrop-opacity: ;\r\n --tw-backdrop-saturate: ;\r\n --tw-backdrop-sepia: ;\r\n}\r\n\r\n.fixed{\r\n position: fixed;\r\n}\r\n\r\n.absolute{\r\n position: absolute;\r\n}\r\n\r\n.relative{\r\n position: relative;\r\n}\r\n\r\n.sticky{\r\n position: sticky;\r\n}\r\n\r\n.left-0{\r\n left: 0px;\r\n}\r\n\r\n.left-4{\r\n left: 1rem;\r\n}\r\n\r\n.top-0{\r\n top: 0px;\r\n}\r\n\r\n.top-1\\\/2{\r\n top: 50%;\r\n}\r\n\r\n.z-30{\r\n z-index: 30;\r\n}\r\n\r\n.z-40{\r\n z-index: 40;\r\n}\r\n\r\n.z-50{\r\n z-index: 50;\r\n}\r\n\r\n.my-2{\r\n margin-top: 0.5rem;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.-ml-3{\r\n margin-left: -0.75rem;\r\n}\r\n\r\n.mb-0{\r\n margin-bottom: 0px;\r\n}\r\n\r\n.mb-0\\.5{\r\n margin-bottom: 0.125rem;\r\n}\r\n\r\n.mb-1{\r\n margin-bottom: 0.25rem;\r\n}\r\n\r\n.mb-2{\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.mb-4{\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.mb-6{\r\n margin-bottom: 1.5rem;\r\n}\r\n\r\n.ml-1{\r\n margin-left: 0.25rem;\r\n}\r\n\r\n.ml-2{\r\n margin-left: 0.5rem;\r\n}\r\n\r\n.ml-3{\r\n margin-left: 0.75rem;\r\n}\r\n\r\n.ml-4{\r\n margin-left: 1rem;\r\n}\r\n\r\n.ml-auto{\r\n margin-left: auto;\r\n}\r\n\r\n.mr-1{\r\n margin-right: 0.25rem;\r\n}\r\n\r\n.mr-2{\r\n margin-right: 0.5rem;\r\n}\r\n\r\n.mr-3{\r\n margin-right: 0.75rem;\r\n}\r\n\r\n.mr-4{\r\n margin-right: 1rem;\r\n}\r\n\r\n.mt-2{\r\n margin-top: 0.5rem;\r\n}\r\n\r\n.mt-3{\r\n margin-top: 0.75rem;\r\n}\r\n\r\n.mt-4{\r\n margin-top: 1rem;\r\n}\r\n\r\n.block{\r\n display: block;\r\n}\r\n\r\n.inline-block{\r\n display: inline-block;\r\n}\r\n\r\n.flex{\r\n display: flex;\r\n}\r\n\r\n.table{\r\n display: table;\r\n}\r\n\r\n.grid{\r\n display: grid;\r\n}\r\n\r\n.hidden{\r\n display: none;\r\n}\r\n\r\n.h-2{\r\n height: 0.5rem;\r\n}\r\n\r\n.h-4{\r\n height: 1rem;\r\n}\r\n\r\n.h-6{\r\n height: 1.5rem;\r\n}\r\n\r\n.h-8{\r\n height: 2rem;\r\n}\r\n\r\n.h-full{\r\n height: 100%;\r\n}\r\n\r\n.max-h-64{\r\n max-height: 16rem;\r\n}\r\n\r\n.min-h-screen{\r\n min-height: 100vh;\r\n}\r\n\r\n.w-2{\r\n width: 0.5rem;\r\n}\r\n\r\n.w-6{\r\n width: 1.5rem;\r\n}\r\n\r\n.w-64{\r\n width: 16rem;\r\n}\r\n\r\n.w-8{\r\n width: 2rem;\r\n}\r\n\r\n.w-full{\r\n width: 100%;\r\n}\r\n\r\n.min-w-\\[460px\\]{\r\n min-width: 460px;\r\n}\r\n\r\n.min-w-\\[540px\\]{\r\n min-width: 540px;\r\n}\r\n\r\n.max-w-\\[140px\\]{\r\n max-width: 140px;\r\n}\r\n\r\n.max-w-xs{\r\n max-width: 20rem;\r\n}\r\n\r\n.-translate-x-full{\r\n --tw-translate-x: -100%;\r\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\r\n}\r\n\r\n.-translate-y-1\\\/2{\r\n --tw-translate-y: -50%;\r\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\r\n}\r\n\r\n.appearance-none{\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n}\r\n\r\n.grid-cols-1{\r\n grid-template-columns: repeat(1, minmax(0, 1fr));\r\n}\r\n\r\n.items-start{\r\n align-items: flex-start;\r\n}\r\n\r\n.items-center{\r\n align-items: center;\r\n}\r\n\r\n.justify-center{\r\n justify-content: center;\r\n}\r\n\r\n.justify-between{\r\n justify-content: space-between;\r\n}\r\n\r\n.gap-4{\r\n gap: 1rem;\r\n}\r\n\r\n.gap-6{\r\n gap: 1.5rem;\r\n}\r\n\r\n.overflow-x-auto{\r\n overflow-x: auto;\r\n}\r\n\r\n.overflow-y-auto{\r\n overflow-y: auto;\r\n}\r\n\r\n.truncate{\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.rounded{\r\n border-radius: 0.25rem;\r\n}\r\n\r\n.rounded-full{\r\n border-radius: 9999px;\r\n}\r\n\r\n.rounded-md{\r\n border-radius: 0.375rem;\r\n}\r\n\r\n.rounded-bl-md{\r\n border-bottom-left-radius: 0.375rem;\r\n}\r\n\r\n.rounded-br-md{\r\n border-bottom-right-radius: 0.375rem;\r\n}\r\n\r\n.rounded-tl-md{\r\n border-top-left-radius: 0.375rem;\r\n}\r\n\r\n.rounded-tr-md{\r\n border-top-right-radius: 0.375rem;\r\n}\r\n\r\n.border{\r\n border-width: 1px;\r\n}\r\n\r\n.border-b{\r\n border-bottom-width: 1px;\r\n}\r\n\r\n.border-b-2{\r\n border-bottom-width: 2px;\r\n}\r\n\r\n.border-dashed{\r\n border-style: dashed;\r\n}\r\n\r\n.border-gray-100{\r\n --tw-border-opacity: 1;\r\n border-color: rgb(243 244 246 \/ var(--tw-border-opacity));\r\n}\r\n\r\n.border-gray-200{\r\n --tw-border-opacity: 1;\r\n border-color: rgb(229 231 235 \/ var(--tw-border-opacity));\r\n}\r\n\r\n.border-b-gray-100{\r\n --tw-border-opacity: 1;\r\n border-bottom-color: rgb(243 244 246 \/ var(--tw-border-opacity));\r\n}\r\n\r\n.border-b-gray-50{\r\n --tw-border-opacity: 1;\r\n border-bottom-color: rgb(249 250 251 \/ var(--tw-border-opacity));\r\n}\r\n\r\n.border-b-gray-800{\r\n --tw-border-opacity: 1;\r\n border-bottom-color: rgb(31 41 55 \/ var(--tw-border-opacity));\r\n}\r\n\r\n.border-b-transparent{\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.bg-black\\\/50{\r\n background-color: rgb(0 0 0 \/ 0.5);\r\n}\r\n\r\n.bg-blue-500{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(59 130 246 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-blue-500\\\/10{\r\n background-color: rgb(59 130 246 \/ 0.1);\r\n}\r\n\r\n.bg-emerald-500\\\/10{\r\n background-color: rgb(16 185 129 \/ 0.1);\r\n}\r\n\r\n.bg-gray-100{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(243 244 246 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-gray-50{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(249 250 251 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-gray-900{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(17 24 39 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-rose-500\\\/10{\r\n background-color: rgb(244 63 94 \/ 0.1);\r\n}\r\n\r\n.bg-white{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(255 255 255 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.bg-select-arrow{\r\n background-image: url(\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTExLjk5OTcgMTMuMTcxNEwxNi45NDk1IDguMjIxNjhMMTguMzYzNyA5LjYzNTg5TDExLjk5OTcgMTUuOTk5OUw1LjYzNTc0IDkuNjM1ODlMNy4wNDk5NiA4LjIyMTY4TDExLjk5OTcgMTMuMTcxNFoiIGZpbGw9InJnYmEoMTU2LDE2MywxNzUsMSkiPjwvcGF0aD48L3N2Zz4=\");\r\n}\r\n\r\n.bg-\\[length\\:16px_16px\\]{\r\n background-size: 16px 16px;\r\n}\r\n\r\n.bg-\\[right_16px_center\\]{\r\n background-position: right 16px center;\r\n}\r\n\r\n.bg-no-repeat{\r\n background-repeat: no-repeat;\r\n}\r\n\r\n.object-cover{\r\n -o-object-fit: cover;\r\n object-fit: cover;\r\n}\r\n\r\n.p-1{\r\n padding: 0.25rem;\r\n}\r\n\r\n.p-4{\r\n padding: 1rem;\r\n}\r\n\r\n.p-6{\r\n padding: 1.5rem;\r\n}\r\n\r\n.px-4{\r\n padding-left: 1rem;\r\n padding-right: 1rem;\r\n}\r\n\r\n.px-6{\r\n padding-left: 1.5rem;\r\n padding-right: 1.5rem;\r\n}\r\n\r\n.py-1{\r\n padding-top: 0.25rem;\r\n padding-bottom: 0.25rem;\r\n}\r\n\r\n.py-1\\.5{\r\n padding-top: 0.375rem;\r\n padding-bottom: 0.375rem;\r\n}\r\n\r\n.py-2{\r\n padding-top: 0.5rem;\r\n padding-bottom: 0.5rem;\r\n}\r\n\r\n.pb-1{\r\n padding-bottom: 0.25rem;\r\n}\r\n\r\n.pb-4{\r\n padding-bottom: 1rem;\r\n}\r\n\r\n.pl-10{\r\n padding-left: 2.5rem;\r\n}\r\n\r\n.pl-4{\r\n padding-left: 1rem;\r\n}\r\n\r\n.pl-7{\r\n padding-left: 1.75rem;\r\n}\r\n\r\n.pr-10{\r\n padding-right: 2.5rem;\r\n}\r\n\r\n.pr-4{\r\n padding-right: 1rem;\r\n}\r\n\r\n.pt-4{\r\n padding-top: 1rem;\r\n}\r\n\r\n.text-left{\r\n text-align: left;\r\n}\r\n\r\n.align-top{\r\n vertical-align: top;\r\n}\r\n\r\n.align-middle{\r\n vertical-align: middle;\r\n}\r\n\r\n.font-inter{\r\n font-family: 'Inter', sans-serif;\r\n}\r\n\r\n.text-2xl{\r\n font-size: 1.5rem;\r\n line-height: 2rem;\r\n}\r\n\r\n.text-\\[11px\\]{\r\n font-size: 11px;\r\n}\r\n\r\n.text-\\[12px\\]{\r\n font-size: 12px;\r\n}\r\n\r\n.text-\\[13px\\]{\r\n font-size: 13px;\r\n}\r\n\r\n.text-base{\r\n font-size: 1rem;\r\n line-height: 1.5rem;\r\n}\r\n\r\n.text-lg{\r\n font-size: 1.125rem;\r\n line-height: 1.75rem;\r\n}\r\n\r\n.text-sm{\r\n font-size: 0.875rem;\r\n line-height: 1.25rem;\r\n}\r\n\r\n.text-xl{\r\n font-size: 1.25rem;\r\n line-height: 1.75rem;\r\n}\r\n\r\n.font-bold{\r\n font-weight: 700;\r\n}\r\n\r\n.font-medium{\r\n font-weight: 500;\r\n}\r\n\r\n.font-normal{\r\n font-weight: 400;\r\n}\r\n\r\n.font-semibold{\r\n font-weight: 600;\r\n}\r\n\r\n.uppercase{\r\n text-transform: uppercase;\r\n}\r\n\r\n.leading-none{\r\n line-height: 1;\r\n}\r\n\r\n.tracking-wide{\r\n letter-spacing: 0.025em;\r\n}\r\n\r\n.text-blue-500{\r\n --tw-text-opacity: 1;\r\n color: rgb(59 130 246 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.text-emerald-500{\r\n --tw-text-opacity: 1;\r\n color: rgb(16 185 129 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.text-gray-300{\r\n --tw-text-opacity: 1;\r\n color: rgb(209 213 219 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.text-gray-400{\r\n --tw-text-opacity: 1;\r\n color: rgb(156 163 175 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.text-gray-600{\r\n --tw-text-opacity: 1;\r\n color: rgb(75 85 99 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.text-gray-800{\r\n --tw-text-opacity: 1;\r\n color: rgb(31 41 55 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.text-rose-500{\r\n --tw-text-opacity: 1;\r\n color: rgb(244 63 94 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.text-white{\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.shadow-md{\r\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\r\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\r\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\r\n}\r\n\r\n.shadow-black\\\/10{\r\n --tw-shadow-color: rgb(0 0 0 \/ 0.1);\r\n --tw-shadow: var(--tw-shadow-colored);\r\n}\r\n\r\n.shadow-black\\\/5{\r\n --tw-shadow-color: rgb(0 0 0 \/ 0.05);\r\n --tw-shadow: var(--tw-shadow-colored);\r\n}\r\n\r\n.outline-none{\r\n outline: 2px solid transparent;\r\n outline-offset: 2px;\r\n}\r\n\r\n.transition-all{\r\n transition-property: all;\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n transition-duration: 150ms;\r\n}\r\n\r\n.transition-transform{\r\n transition-property: transform;\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n transition-duration: 150ms;\r\n}\r\n\r\n.notification-tab > .active{\r\n --tw-border-opacity: 1;\r\n border-bottom-color: rgb(59 130 246 \/ var(--tw-border-opacity));\r\n --tw-text-opacity: 1;\r\n color: rgb(59 130 246 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.notification-tab > .active:hover{\r\n --tw-text-opacity: 1;\r\n color: rgb(59 130 246 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.order-tab > .active{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(59 130 246 \/ var(--tw-bg-opacity));\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.order-tab > .active:hover{\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 \/ var(--tw-text-opacity));\r\n}\r\n\r\n@media (min-width: 768px){\r\n .main.active{\r\n margin-left: 0px;\r\n width: 100%;\r\n }\r\n}\r\n\r\n.before\\:mr-3::before{\r\n content: var(--tw-content);\r\n margin-right: 0.75rem;\r\n}\r\n\r\n.before\\:h-1::before{\r\n content: var(--tw-content);\r\n height: 0.25rem;\r\n}\r\n\r\n.before\\:w-1::before{\r\n content: var(--tw-content);\r\n width: 0.25rem;\r\n}\r\n\r\n.before\\:rounded-full::before{\r\n content: var(--tw-content);\r\n border-radius: 9999px;\r\n}\r\n\r\n.before\\:bg-gray-300::before{\r\n content: var(--tw-content);\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(209 213 219 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.hover\\:bg-gray-50:hover{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(249 250 251 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.hover\\:bg-gray-950:hover{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(3 7 18 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.hover\\:text-blue-500:hover{\r\n --tw-text-opacity: 1;\r\n color: rgb(59 130 246 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.hover\\:text-blue-600:hover{\r\n --tw-text-opacity: 1;\r\n color: rgb(37 99 235 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.hover\\:text-gray-100:hover{\r\n --tw-text-opacity: 1;\r\n color: rgb(243 244 246 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.hover\\:text-gray-600:hover{\r\n --tw-text-opacity: 1;\r\n color: rgb(75 85 99 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.focus\\:border-blue-500:focus{\r\n --tw-border-opacity: 1;\r\n border-color: rgb(59 130 246 \/ var(--tw-border-opacity));\r\n}\r\n\r\n.group:hover .group-hover\\:text-blue-500{\r\n --tw-text-opacity: 1;\r\n color: rgb(59 130 246 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.group.selected .group-\\[\\.selected\\]\\:block{\r\n display: block;\r\n}\r\n\r\n.group.selected .group-\\[\\.selected\\]\\:rotate-90{\r\n --tw-rotate: 90deg;\r\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\r\n}\r\n\r\n.group.active .group-\\[\\.active\\]\\:bg-gray-800{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(31 41 55 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.group.selected .group-\\[\\.selected\\]\\:bg-gray-950{\r\n --tw-bg-opacity: 1;\r\n background-color: rgb(3 7 18 \/ var(--tw-bg-opacity));\r\n}\r\n\r\n.group.active .group-\\[\\.active\\]\\:text-white{\r\n --tw-text-opacity: 1;\r\n color: rgb(255 255 255 \/ var(--tw-text-opacity));\r\n}\r\n\r\n.group.selected .group-\\[\\.selected\\]\\:text-gray-100{\r\n --tw-text-opacity: 1;\r\n color: rgb(243 244 246 \/ var(--tw-text-opacity));\r\n}\r\n\r\n@media (min-width: 768px){\r\n .md\\:ml-64{\r\n margin-left: 16rem;\r\n }\r\n\r\n .md\\:hidden{\r\n display: none;\r\n }\r\n\r\n .md\\:w-\\[calc\\(100\\%-256px\\)\\]{\r\n width: calc(100% - 256px);\r\n }\r\n\r\n .md\\:grid-cols-2{\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n}\r\n\r\n@media (min-width: 1024px){\r\n .lg\\:col-span-2{\r\n grid-column: span 2 \/ span 2;\r\n }\r\n\r\n .lg\\:grid-cols-2{\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n\r\n .lg\\:grid-cols-3{\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-gray-800 font-inter\">\r\n <!--sidenav -->\r\n <div class=\"fixed left-0 top-0 w-64 h-full bg-[#f8f4f3] p-4 z-50 sidebar-menu transition-transform\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center pb-4 border-b border-b-gray-800\">\r\n\r\n <h2 class=\"font-bold text-2xl\">LOREM <span class=\"bg-[#f84525] text-white px-2 rounded-md\">IPSUM<\/span><\/h2>\r\n <\/a>\r\n <ul class=\"mt-4\">\r\n <span class=\"text-gray-400 font-bold\">ADMIN<\/span>\r\n <li class=\"mb-1 group\">\r\n <a href=https://www.creative-tim.com/"/" class=\"flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100\">\r\n <i class=\"ri-home-2-line mr-3 text-lg\"><\/i>\r\n <span class=\"text-sm\">Dashboard<\/span>\r\n <\/a>\r\n <\/li>\r\n <li class=\"mb-1 group\">\r\n <a href=https://www.creative-tim.com/"/" class=\"flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100 sidebar-dropdown-toggle\">\r\n <i class='bx bx-user mr-3 text-lg'><\/i> \r\n <span class=\"text-sm\">Users<\/span>\r\n <i class=\"ri-arrow-right-s-line ml-auto group-[.selected]:rotate-90\"><\/i>\r\n <\/a>\r\n <ul class=\"pl-7 mt-2 hidden group-[.selected]:block\">\r\n <li class=\"mb-4\">\r\n <a href=https://www.creative-tim.com/"/" class=\"text-gray-900 text-sm flex items-center hover:text-[#f84525] before:contents-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3\">All<\/a>\r\n <\/li> \r\n <li class=\"mb-4\">\r\n <a href=https://www.creative-tim.com/"/" class=\"text-gray-900 text-sm flex items-center hover:text-[#f84525] before:contents-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3\">Roles<\/a>\r\n <\/li> \r\n <\/ul>\r\n <\/li>\r\n <li class=\"mb-1 group\">\r\n <a href=https://www.creative-tim.com/"/" class=\"flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100\">\r\n <i class='bx bx-list-ul mr-3 text-lg'><\/i> \r\n <span class=\"text-sm\">Activities<\/span>\r\n <\/a>\r\n <\/li>\r\n <span class=\"text-gray-400 font-bold\">BLOG<\/span>\r\n <li class=\"mb-1 group\">\r\n <a href=https://www.creative-tim.com/"/" class=\"flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100 sidebar-dropdown-toggle\">\r\n <i class='bx bxl-blogger mr-3 text-lg' ><\/i> \r\n <span class=\"text-sm\">Post<\/span>\r\n <i class=\"ri-arrow-right-s-line ml-auto group-[.selected]:rotate-90\"><\/i>\r\n <\/a>\r\n <ul class=\"pl-7 mt-2 hidden group-[.selected]:block\">\r\n <li class=\"mb-4\">\r\n <a href=https://www.creative-tim.com/"/" class=\"text-gray-900 text-sm flex items-center hover:text-[#f84525] before:contents-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3\">All<\/a>\r\n <\/li> \r\n <li class=\"mb-4\">\r\n <a href=https://www.creative-tim.com/"/" class=\"text-gray-900 text-sm flex items-center hover:text-[#f84525] before:contents-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3\">Categories<\/a>\r\n <\/li> \r\n <\/ul>\r\n <\/li>\r\n <li class=\"mb-1 group\">\r\n <a href=https://www.creative-tim.com/"/" class=\"flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100\">\r\n <i class='bx bx-archive mr-3 text-lg'><\/i> \r\n <span class=\"text-sm\">Archive<\/span>\r\n <\/a>\r\n <\/li>\r\n <span class=\"text-gray-400 font-bold\">PERSONAL<\/span>\r\n <li class=\"mb-1 group\">\r\n <a href=https://www.creative-tim.com/"/" class=\"flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100\">\r\n <i class='bx bx-bell mr-3 text-lg' ><\/i> \r\n <span class=\"text-sm\">Notifications<\/span>\r\n <span class=\" md:block px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-red-600 bg-red-200 rounded-full\">5<\/span>\r\n <\/a>\r\n <\/li>\r\n <li class=\"mb-1 group\">\r\n <a href=https://www.creative-tim.com/"/" class=\"flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100\">\r\n <i class='bx bx-envelope mr-3 text-lg' ><\/i> \r\n <span class=\"text-sm\">Messages<\/span>\r\n <span class=\" md:block px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-green-600 bg-green-200 rounded-full\">2 New<\/span>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"fixed top-0 left-0 w-full h-full bg-black\/50 z-40 md:hidden sidebar-overlay\"><\/div>\r\n <!-- end sidenav -->\r\n\r\n <main class=\"w-full md:w-[calc(100%-256px)] md:ml-64 bg-gray-200 min-h-screen transition-all main\">\r\n <!-- navbar -->\r\n <div class=\"py-2 px-6 bg-[#f8f4f3] flex items-center shadow-md shadow-black\/5 sticky top-0 left-0 z-30\">\r\n <button type=\"button\" class=\"text-lg text-gray-900 font-semibold sidebar-toggle\">\r\n <i class=\"ri-menu-line\"><\/i>\r\n <\/button>\r\n\r\n <ul class=\"ml-auto flex items-center\">\r\n <li class=\"mr-1 dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 mr-4 w-8 h-8 rounded flex items-center justify-center hover:text-gray-600\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" class=\"hover:bg-gray-100 rounded-full\" viewBox=\"0 0 24 24\" style=\"fill: gray;transform: ;msFilter:;\"><path d=\"M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z\"><\/path><\/svg> \r\n <\/button>\r\n <div class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden max-w-xs w-full bg-white rounded-md border border-gray-100\">\r\n <form action=https://www.creative-tim.com/"/" class=\"p-4 border-b border-b-gray-100\">\r\n <div class=\"relative w-full\">\r\n <input type=\"text\" class=\"py-2 pr-4 pl-10 bg-gray-50 w-full outline-none border border-gray-100 rounded-md text-sm focus:border-blue-500\" placeholder=\"Search...\">\r\n <i class=\"ri-search-line absolute top-1\/2 left-4 -translate-y-1\/2 text-gray-900\"><\/i>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/li>\r\n <li class=\"dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 mr-4 w-8 h-8 rounded flex items-center justify-center hover:text-gray-600\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" class=\"hover:bg-gray-100 rounded-full\" viewBox=\"0 0 24 24\" style=\"fill: gray;transform: ;msFilter:;\"><path d=\"M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z\"><\/path><\/svg> \r\n <\/button>\r\n <div class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden max-w-xs w-full bg-white rounded-md border border-gray-100\">\r\n <div class=\"flex items-center px-4 pt-4 border-b border-b-gray-100 notification-tab\">\r\n <button type=\"button\" data-tab=\"notification\" data-tab-page=\"notifications\" class=\"text-gray-400 font-medium text-[13px] hover:text-gray-600 border-b-2 border-b-transparent mr-4 pb-1 active\">Notifications<\/button>\r\n <button type=\"button\" data-tab=\"notification\" data-tab-page=\"messages\" class=\"text-gray-400 font-medium text-[13px] hover:text-gray-600 border-b-2 border-b-transparent mr-4 pb-1\">Messages<\/button>\r\n <\/div>\r\n <div class=\"my-2\">\r\n <ul class=\"max-h-64 overflow-y-auto\" data-tab-for=\"notification\" data-page=\"notifications\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">New order<\/div>\r\n <div class=\"text-[11px] text-gray-400\">from a user<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">New order<\/div>\r\n <div class=\"text-[11px] text-gray-400\">from a user<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">New order<\/div>\r\n <div class=\"text-[11px] text-gray-400\">from a user<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">New order<\/div>\r\n <div class=\"text-[11px] text-gray-400\">from a user<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">New order<\/div>\r\n <div class=\"text-[11px] text-gray-400\">from a user<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <ul class=\"max-h-64 overflow-y-auto hidden\" data-tab-for=\"notification\" data-page=\"messages\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">John Doe<\/div>\r\n <div class=\"text-[11px] text-gray-400\">Hello there!<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">John Doe<\/div>\r\n <div class=\"text-[11px] text-gray-400\">Hello there!<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">John Doe<\/div>\r\n <div class=\"text-[11px] text-gray-400\">Hello there!<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">John Doe<\/div>\r\n <div class=\"text-[11px] text-gray-400\">Hello there!<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"py-2 px-4 flex items-center hover:bg-gray-50 group\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded block object-cover align-middle\">\r\n <div class=\"ml-2\">\r\n <div class=\"text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500\">John Doe<\/div>\r\n <div class=\"text-[11px] text-gray-400\">Hello there!<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <button id=\"fullscreen-button\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" class=\"hover:bg-gray-100 rounded-full\" viewBox=\"0 0 24 24\" style=\"fill: gray;transform: ;msFilter:;\"><path d=\"M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z\"><\/path><\/svg>\r\n <\/button>\r\n <script>\r\n const fullscreenButton = document.getElementById('fullscreen-button');\r\n \r\n fullscreenButton.addEventListener('click', toggleFullscreen);\r\n \r\n function toggleFullscreen() {\r\n if (document.fullscreenElement) {\r\n \/\/ If already in fullscreen, exit fullscreen\r\n document.exitFullscreen();\r\n } else {\r\n \/\/ If not in fullscreen, request fullscreen\r\n document.documentElement.requestFullscreen();\r\n }\r\n }\r\n <\/script>\r\n\r\n <li class=\"dropdown ml-3\">\r\n <button type=\"button\" class=\"dropdown-toggle flex items-center\">\r\n <div class=\"flex-shrink-0 w-10 h-10 relative\">\r\n <div class=\"p-1 bg-white rounded-full focus:outline-none focus:ring\">\r\n <img class=\"w-8 h-8 rounded-full\" src=https://www.creative-tim.com/"https:////laravelui.spruko.com//tailwind//ynex//build//assets//images//faces//9.jpg/" alt=\"\"\/>\r\n <div class=\"top-0 left-7 absolute w-3 h-3 bg-lime-400 border-2 border-white rounded-full animate-ping\"><\/div>\r\n <div class=\"top-0 left-7 absolute w-3 h-3 bg-lime-500 border-2 border-white rounded-full\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-2 md:block text-left\">\r\n <h2 class=\"text-sm font-semibold text-gray-800\">John Doe<\/h2>\r\n <p class=\"text-xs text-gray-500\">Administrator<\/p>\r\n <\/div> \r\n <\/button>\r\n <ul class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-[#f84525] hover:bg-gray-50\">Profile<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-[#f84525] hover:bg-gray-50\">Settings<\/a>\r\n <\/li>\r\n <li>\r\n <form method=\"POST\" action=https://www.creative-tim.com/"/">/r/n <a role=\"menuitem\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-[#f84525] hover:bg-gray-50 cursor-pointer\"\r\n onclick=\"event.preventDefault();\r\n this.closest('form').submit();\">\r\n Log Out\r\n <\/a>\r\n <\/form>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <!-- end navbar -->\r\n\r\n <!-- Content -->\r\n <div class=\"p-6\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6\">\r\n <div class=\"bg-white rounded-md border border-gray-100 p-6 shadow-md shadow-black\/5\">\r\n <div class=\"flex justify-between mb-6\">\r\n <div>\r\n <div class=\"flex items-center mb-1\">\r\n <div class=\"text-2xl font-semibold\">2<\/div>\r\n <\/div>\r\n <div class=\"text-sm font-medium text-gray-400\">Users<\/div>\r\n <\/div>\r\n <div class=\"dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 hover:text-gray-600\"><i class=\"ri-more-fill\"><\/i><\/button>\r\n <ul class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Profile<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Settings<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Logout<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div> \r\n <\/div>\r\n\r\n <a href=https://www.creative-tim.com/"//gebruikers/" class=\"text-[#f84525] font-medium text-sm hover:text-red-800\">View<\/a>\r\n <\/div>\r\n <div class=\"bg-white rounded-md border border-gray-100 p-6 shadow-md shadow-black\/5\">\r\n <div class=\"flex justify-between mb-4\">\r\n <div>\r\n <div class=\"flex items-center mb-1\">\r\n <div class=\"text-2xl font-semibold\">100<\/div>\r\n <div class=\"p-1 rounded bg-emerald-500\/10 text-emerald-500 text-[12px] font-semibold leading-none ml-2\">+30%<\/div>\r\n <\/div>\r\n <div class=\"text-sm font-medium text-gray-400\">Companies<\/div>\r\n <\/div>\r\n <div class=\"dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 hover:text-gray-600\"><i class=\"ri-more-fill\"><\/i><\/button>\r\n <ul class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Profile<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Settings<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Logout<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div> \r\n <\/div>\r\n <a href=https://www.creative-tim.com/"//dierenartsen/" class=\"text-[#f84525] font-medium text-sm hover:text-red-800\">View<\/a>\r\n <\/div>\r\n <div class=\"bg-white rounded-md border border-gray-100 p-6 shadow-md shadow-black\/5\">\r\n <div class=\"flex justify-between mb-6\">\r\n <div>\r\n <div class=\"text-2xl font-semibold mb-1\">100<\/div>\r\n <div class=\"text-sm font-medium text-gray-400\">Blogs<\/div>\r\n <\/div>\r\n <div class=\"dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 hover:text-gray-600\"><i class=\"ri-more-fill\"><\/i><\/button>\r\n <ul class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Profile<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Settings<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Logout<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div> \r\n <\/div>\r\n <a href=https://www.creative-tim.com/"/" class=\"text-[#f84525] font-medium text-sm hover:text-red-800\">View<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6\">\r\n <div class=\"p-6 relative flex flex-col min-w-0 mb-4 lg:mb-0 break-words bg-gray-50 dark:bg-gray-800 w-full shadow-lg rounded\">\r\n <div class=\"rounded-t mb-0 px-0 border-0\">\r\n <div class=\"flex flex-wrap items-center px-4 py-2\">\r\n <div class=\"relative w-full max-w-full flex-grow flex-1\">\r\n <h3 class=\"font-semibold text-base text-gray-900 dark:text-gray-50\">Users<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"block w-full overflow-x-auto\">\r\n <table class=\"items-center w-full bg-transparent border-collapse\">\r\n <thead>\r\n <tr>\r\n <th class=\"px-4 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-100 align-middle border border-solid border-gray-200 dark:border-gray-500 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left\">Role<\/th>\r\n <th class=\"px-4 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-100 align-middle border border-solid border-gray-200 dark:border-gray-500 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left\">Amount<\/th>\r\n <th class=\"px-4 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-100 align-middle border border-solid border-gray-200 dark:border-gray-500 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px\"><\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"text-gray-700 dark:text-gray-100\">\r\n <th class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left\">Administrator<\/th>\r\n <td class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4\">1<\/td>\r\n <td class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4\">\r\n <div class=\"flex items-center\">\r\n <span class=\"mr-2\">70%<\/span>\r\n <div class=\"relative w-full\">\r\n <div class=\"overflow-hidden h-2 text-xs flex rounded bg-blue-200\">\r\n <div style=\"width: 70%\" class=\"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-600\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/td>\r\n <\/tr>\r\n <tr class=\"text-gray-700 dark:text-gray-100\">\r\n <th class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left\">User<\/th>\r\n <td class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4\">6<\/td>\r\n <td class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4\">\r\n <div class=\"flex items-center\">\r\n <span class=\"mr-2\">40%<\/span>\r\n <div class=\"relative w-full\">\r\n <div class=\"overflow-hidden h-2 text-xs flex rounded bg-blue-200\">\r\n <div style=\"width: 40%\" class=\"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/td>\r\n <\/tr>\r\n <tr class=\"text-gray-700 dark:text-gray-100\">\r\n <th class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left\">User<\/th>\r\n <td class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4\">5<\/td>\r\n <td class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4\">\r\n <div class=\"flex items-center\">\r\n <span class=\"mr-2\">45%<\/span>\r\n <div class=\"relative w-full\">\r\n <div class=\"overflow-hidden h-2 text-xs flex rounded bg-pink-200\">\r\n <div style=\"width: 45%\" class=\"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/td>\r\n <\/tr>\r\n <tr class=\"text-gray-700 dark:text-gray-100\">\r\n <th class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left\">User<\/th>\r\n <td class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4\">4<\/td>\r\n <td class=\"border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4\">\r\n <div class=\"flex items-center\">\r\n <span class=\"mr-2\">60%<\/span>\r\n <div class=\"relative w-full\">\r\n <div class=\"overflow-hidden h-2 text-xs flex rounded bg-red-200\">\r\n <div style=\"width: 60%\" class=\"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white border border-gray-100 shadow-md shadow-black\/5 p-6 rounded-md\">\r\n <div class=\"flex justify-between mb-4 items-start\">\r\n <div class=\"font-medium\">Activities<\/div>\r\n <div class=\"dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 hover:text-gray-600\"><i class=\"ri-more-fill\"><\/i><\/button>\r\n <ul class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Profile<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Settings<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Logout<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"overflow-hidden\">\r\n <table class=\"w-full min-w-[540px]\">\r\n <tbody>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Lorem Ipsum<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-gray-400\">02-02-2024<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-gray-400\">17.45<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 hover:text-gray-600 text-sm w-6 h-6 rounded flex items-center justify-center bg-gray-50\"><i class=\"ri-more-2-fill\"><\/i><\/button>\r\n <ul class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Profile<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Settings<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Logout<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/td> \r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Lorem Ipsum<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-gray-400\">02-02-2024<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-gray-400\">17.45<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 hover:text-gray-600 text-sm w-6 h-6 rounded flex items-center justify-center bg-gray-50\"><i class=\"ri-more-2-fill\"><\/i><\/button>\r\n <ul class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Profile<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Settings<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Logout<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/td> \r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6\">\r\n <div class=\"bg-white border border-gray-100 shadow-md shadow-black\/5 p-6 rounded-md lg:col-span-2\">\r\n <div class=\"flex justify-between mb-4 items-start\">\r\n <div class=\"font-medium\">Order Statistics<\/div>\r\n <div class=\"dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 hover:text-gray-600\"><i class=\"ri-more-fill\"><\/i><\/button>\r\n <ul class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Profile<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Settings<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Logout<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div> \r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4\">\r\n <div class=\"rounded-md border border-dashed border-gray-200 p-4\">\r\n <div class=\"flex items-center mb-0.5\">\r\n <div class=\"text-xl font-semibold\">10<\/div>\r\n <span class=\"p-1 rounded text-[12px] font-semibold bg-blue-500\/10 text-blue-500 leading-none ml-1\">$80<\/span>\r\n <\/div>\r\n <span class=\"text-gray-400 text-sm\">Active<\/span>\r\n <\/div>\r\n <div class=\"rounded-md border border-dashed border-gray-200 p-4\">\r\n <div class=\"flex items-center mb-0.5\">\r\n <div class=\"text-xl font-semibold\">50<\/div>\r\n <span class=\"p-1 rounded text-[12px] font-semibold bg-emerald-500\/10 text-emerald-500 leading-none ml-1\">+$469<\/span>\r\n <\/div>\r\n <span class=\"text-gray-400 text-sm\">Completed<\/span>\r\n <\/div>\r\n <div class=\"rounded-md border border-dashed border-gray-200 p-4\">\r\n <div class=\"flex items-center mb-0.5\">\r\n <div class=\"text-xl font-semibold\">4<\/div>\r\n <span class=\"p-1 rounded text-[12px] font-semibold bg-rose-500\/10 text-rose-500 leading-none ml-1\">-$130<\/span>\r\n <\/div>\r\n <span class=\"text-gray-400 text-sm\">Canceled<\/span>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <canvas id=\"order-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white border border-gray-100 shadow-md shadow-black\/5 p-6 rounded-md\">\r\n <div class=\"flex justify-between mb-4 items-start\">\r\n <div class=\"font-medium\">Earnings<\/div>\r\n <div class=\"dropdown\">\r\n <button type=\"button\" class=\"dropdown-toggle text-gray-400 hover:text-gray-600\"><i class=\"ri-more-fill\"><\/i><\/button>\r\n <ul class=\"dropdown-menu shadow-md shadow-black\/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]\">\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Profile<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Settings<\/a>\r\n <\/li>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\" class=\"flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50\">Logout<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"overflow-x-auto\">\r\n <table class=\"w-full min-w-[460px]\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-[12px] uppercase tracking-wide font-medium text-gray-400 py-2 px-4 bg-gray-50 text-left rounded-tl-md rounded-bl-md\">Service<\/th>\r\n <th class=\"text-[12px] uppercase tracking-wide font-medium text-gray-400 py-2 px-4 bg-gray-50 text-left\">Earning<\/th>\r\n <th class=\"text-[12px] uppercase tracking-wide font-medium text-gray-400 py-2 px-4 bg-gray-50 text-left rounded-tr-md rounded-br-md\">Status<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-emerald-500\">+$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-emerald-500\/10 text-emerald-500 font-medium text-[12px] leading-none\">Pending<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-rose-500\">-$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-rose-500\/10 text-rose-500 font-medium text-[12px] leading-none\">Withdrawn<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-emerald-500\">+$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-emerald-500\/10 text-emerald-500 font-medium text-[12px] leading-none\">Pending<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-rose-500\">-$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-rose-500\/10 text-rose-500 font-medium text-[12px] leading-none\">Withdrawn<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-emerald-500\">+$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-emerald-500\/10 text-emerald-500 font-medium text-[12px] leading-none\">Pending<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-rose-500\">-$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-rose-500\/10 text-rose-500 font-medium text-[12px] leading-none\">Withdrawn<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-emerald-500\">+$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-emerald-500\/10 text-emerald-500 font-medium text-[12px] leading-none\">Pending<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-rose-500\">-$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-rose-500\/10 text-rose-500 font-medium text-[12px] leading-none\">Withdrawn<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-emerald-500\">+$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-emerald-500\/10 text-emerald-500 font-medium text-[12px] leading-none\">Pending<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <div class=\"flex items-center\">\r\n <img src=https://www.creative-tim.com/"https:////placehold.co//32x32/" alt=\"\" class=\"w-8 h-8 rounded object-cover block\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate\">Create landing page<\/a>\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"text-[13px] font-medium text-rose-500\">-$235<\/span>\r\n <\/td>\r\n <td class=\"py-2 px-4 border-b border-b-gray-50\">\r\n <span class=\"inline-block p-1 rounded bg-rose-500\/10 text-rose-500 font-medium text-[12px] leading-none\">Withdrawn<\/span>\r\n <\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- End Content -->\r\n <\/main>\r\n\r\n <script src=https://www.creative-tim.com/"https:////unpkg.com//@popperjs//core@2/">/r/n <script src=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//npm//chart.js/">/r/n/r/n <script>\r\n \/\/ start: Sidebar\r\n const sidebarToggle = document.querySelector('.sidebar-toggle')\r\n const sidebarOverlay = document.querySelector('.sidebar-overlay')\r\n const sidebarMenu = document.querySelector('.sidebar-menu')\r\n const main = document.querySelector('.main')\r\n sidebarToggle.addEventListener('click', function (e) {\r\n e.preventDefault()\r\n main.classList.toggle('active')\r\n sidebarOverlay.classList.toggle('hidden')\r\n sidebarMenu.classList.toggle('-translate-x-full')\r\n })\r\n sidebarOverlay.addEventListener('click', function (e) {\r\n e.preventDefault()\r\n main.classList.add('active')\r\n sidebarOverlay.classList.add('hidden')\r\n sidebarMenu.classList.add('-translate-x-full')\r\n })\r\n document.querySelectorAll('.sidebar-dropdown-toggle').forEach(function (item) {\r\n item.addEventListener('click', function (e) {\r\n e.preventDefault()\r\n const parent = item.closest('.group')\r\n if (parent.classList.contains('selected')) {\r\n parent.classList.remove('selected')\r\n } else {\r\n document.querySelectorAll('.sidebar-dropdown-toggle').forEach(function (i) {\r\n i.closest('.group').classList.remove('selected')\r\n })\r\n parent.classList.add('selected')\r\n }\r\n })\r\n })\r\n \/\/ end: Sidebar\r\n\r\n\r\n\r\n \/\/ start: Popper\r\n const popperInstance = {}\r\n document.querySelectorAll('.dropdown').forEach(function (item, index) {\r\n const popperId = 'popper-' + index\r\n const toggle = item.querySelector('.dropdown-toggle')\r\n const menu = item.querySelector('.dropdown-menu')\r\n menu.dataset.popperId = popperId\r\n popperInstance[popperId] = Popper.createPopper(toggle, menu, {\r\n modifiers: [\r\n {\r\n name: 'offset',\r\n options: {\r\n offset: [0, 8],\r\n },\r\n },\r\n {\r\n name: 'preventOverflow',\r\n options: {\r\n padding: 24,\r\n },\r\n },\r\n ],\r\n placement: 'bottom-end'\r\n });\r\n })\r\n document.addEventListener('click', function (e) {\r\n const toggle = e.target.closest('.dropdown-toggle')\r\n const menu = e.target.closest('.dropdown-menu')\r\n if (toggle) {\r\n const menuEl = toggle.closest('.dropdown').querySelector('.dropdown-menu')\r\n const popperId = menuEl.dataset.popperId\r\n if (menuEl.classList.contains('hidden')) {\r\n hideDropdown()\r\n menuEl.classList.remove('hidden')\r\n showPopper(popperId)\r\n } else {\r\n menuEl.classList.add('hidden')\r\n hidePopper(popperId)\r\n }\r\n } else if (!menu) {\r\n hideDropdown()\r\n }\r\n })\r\n\r\n function hideDropdown() {\r\n document.querySelectorAll('.dropdown-menu').forEach(function (item) {\r\n item.classList.add('hidden')\r\n })\r\n }\r\n function showPopper(popperId) {\r\n popperInstance[popperId].setOptions(function (options) {\r\n return {\r\n ...options,\r\n modifiers: [\r\n ...options.modifiers,\r\n { name: 'eventListeners', enabled: true },\r\n ],\r\n }\r\n });\r\n popperInstance[popperId].update();\r\n }\r\n function hidePopper(popperId) {\r\n popperInstance[popperId].setOptions(function (options) {\r\n return {\r\n ...options,\r\n modifiers: [\r\n ...options.modifiers,\r\n { name: 'eventListeners', enabled: false },\r\n ],\r\n }\r\n });\r\n }\r\n \/\/ end: Popper\r\n\r\n\r\n\r\n \/\/ start: Tab\r\n document.querySelectorAll('[data-tab]').forEach(function (item) {\r\n item.addEventListener('click', function (e) {\r\n e.preventDefault()\r\n const tab = item.dataset.tab\r\n const page = item.dataset.tabPage\r\n const target = document.querySelector('[data-tab-for=\"' + tab + '\"][data-page=\"' + page + '\"]')\r\n document.querySelectorAll('[data-tab=\"' + tab + '\"]').forEach(function (i) {\r\n i.classList.remove('active')\r\n })\r\n document.querySelectorAll('[data-tab-for=\"' + tab + '\"]').forEach(function (i) {\r\n i.classList.add('hidden')\r\n })\r\n item.classList.add('active')\r\n target.classList.remove('hidden')\r\n })\r\n })\r\n \/\/ end: Tab\r\n\r\n\r\n\r\n \/\/ start: Chart\r\n new Chart(document.getElementById('order-chart'), {\r\n type: 'line',\r\n data: {\r\n labels: generateNDays(7),\r\n datasets: [\r\n {\r\n label: 'Active',\r\n data: generateRandomData(7),\r\n borderWidth: 1,\r\n fill: true,\r\n pointBackgroundColor: 'rgb(59, 130, 246)',\r\n borderColor: 'rgb(59, 130, 246)',\r\n backgroundColor: 'rgb(59 130 246 \/ .05)',\r\n tension: .2\r\n },\r\n {\r\n label: 'Completed',\r\n data: generateRandomData(7),\r\n borderWidth: 1,\r\n fill: true,\r\n pointBackgroundColor: 'rgb(16, 185, 129)',\r\n borderColor: 'rgb(16, 185, 129)',\r\n backgroundColor: 'rgb(16 185 129 \/ .05)',\r\n tension: .2\r\n },\r\n {\r\n label: 'Canceled',\r\n data: generateRandomData(7),\r\n borderWidth: 1,\r\n fill: true,\r\n pointBackgroundColor: 'rgb(244, 63, 94)',\r\n borderColor: 'rgb(244, 63, 94)',\r\n backgroundColor: 'rgb(244 63 94 \/ .05)',\r\n tension: .2\r\n },\r\n ]\r\n },\r\n options: {\r\n scales: {\r\n y: {\r\n beginAtZero: true\r\n }\r\n }\r\n }\r\n });\r\n\r\n function generateNDays(n) {\r\n const data = https://www.creative-tim.com/twcomponents/component/[]/r/n for(let i=0; i<n; i++) {\r\n const date = new Date()\r\n date.setDate(date.getDate()-i)\r\n data.push(date.toLocaleString('en-US', {\r\n month: 'short',\r\n day: 'numeric'\r\n }))\r\n }\r\n return data\r\n }\r\n function generateRandomData(n) {\r\n const data = https://www.creative-tim.com/twcomponents/component/[]/r/n for(let i=0; i<n; i++) {\r\n data.push(Math.round(Math.random() * 10))\r\n }\r\n return data\r\n }\r\n \/\/ end: Chart\r\n\r\n \r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>","author_type":"App\\User","author_id":6940,"collection_id":null,"fork_id":null,"votes":13,"score":"4.1","visits":46552,"popularity":10340,"slug":"admin-panel-1","approved":1,"created_at":"2024-02-12T00:00:00.000000Z","updated_at":"2024-09-19T04:47:02.000000Z","downloads":2457,"code_views":14404,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11472,"model_type":"App\\Component","model_id":6244,"collection_name":"preview","name":"temp25497","file_name":"temp25497.png","mime_type":"image\/png","disk":"public","size":99376,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp25497___media_library_original_1280_957.png","temp25497___media_library_original_1070_800.png","temp25497___media_library_original_895_669.png","temp25497___media_library_original_749_560.png","temp25497___media_library_original_627_469.png","temp25497___media_library_original_524_392.png","temp25497___media_library_original_439_328.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUjJ4czQ0MkxnWXJOUlY3blE2a3VXeHNGVU1RMm5tdGJIUGNRUnFZOFpPNml3cmpXc1VLYm1CelNIY3BwYnREMVBGU2k1RjFHWFp4V3BrUzJtMGtscVQxSHNXWnBFOG80cVJsSmxEc0JVbzBleG9SMlNoUmdWUmxZU2FBUnhzY1VES0lmS2tZcGlQLzJRPT0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":6,"created_at":"2024-02-12T18:01:51.000000Z","updated_at":"2024-02-12T18:01:53.000000Z","conversions_disk":"public","uuid":"f518fc71-9c1b-4280-9bba-5d19cdbe8eb3","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11472\/temp25497.png","preview_url":""}],"author":{"id":6940,"name":"123ApplePie","slug":"123applepie","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/73269263?v=4","header":null,"created_at":"2022-02-21T13:49:46.000000Z","updated_at":"2022-02-21T13:49:46.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":6244,"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":6244,"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":6244,"tag_id":41}},{"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":6244,"tag_id":76}}],"fork":null,"favorites":[{"id":16952,"name":"mpadinhabrandao","slug":"mpadinhabrandao","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7913404?v=4","header":null,"created_at":"2024-02-14T16:07:19.000000Z","updated_at":"2024-02-14T16:07:19.000000Z","pivot":{"component_id":6244,"user_id":16952}},{"id":16445,"name":"wlhtea","slug":"wlhtea","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/115779315?v=4","header":null,"created_at":"2024-01-19T14:29:16.000000Z","updated_at":"2024-01-19T14:29:16.000000Z","pivot":{"component_id":6244,"user_id":16445}},{"id":16732,"name":"Yousef Najib","slug":"yousef-najib","bio":null,"avatar":"\/storage\/avatars\/HOh38rDP25DJDFRZh4FIZFZ1pNLJTM9D0vdbD3K4.jpg","header":null,"created_at":"2024-02-03T21:29:22.000000Z","updated_at":"2024-02-16T00:08:19.000000Z","pivot":{"component_id":6244,"user_id":16732}},{"id":16771,"name":"harshascode","slug":"harshascode","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/118063362?v=4","header":null,"created_at":"2024-02-05T18:32:17.000000Z","updated_at":"2024-02-05T18:32:17.000000Z","pivot":{"component_id":6244,"user_id":16771}},{"id":16933,"name":"JoungSik","slug":"joungsik","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/6128807?v=4","header":null,"created_at":"2024-02-13T19:37:11.000000Z","updated_at":"2024-02-13T19:37:11.000000Z","pivot":{"component_id":6244,"user_id":16933}},{"id":17040,"name":"AUANYE","slug":"auanye","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/79439958?v=4","header":null,"created_at":"2024-02-19T02:21:48.000000Z","updated_at":"2024-02-19T02:21:48.000000Z","pivot":{"component_id":6244,"user_id":17040}},{"id":13484,"name":"developer-abdulali","slug":"developer-abdulali","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/103456792?v=4","header":null,"created_at":"2023-08-02T16:09:44.000000Z","updated_at":"2023-08-02T16:09:44.000000Z","pivot":{"component_id":6244,"user_id":13484}},{"id":17095,"name":"ESC","slug":"esc","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/d6743a68f91a2d00f63d4504f6876f1c","header":null,"created_at":"2024-02-21T13:26:05.000000Z","updated_at":"2024-02-21T13:26:05.000000Z","pivot":{"component_id":6244,"user_id":17095}},{"id":16381,"name":"ALSHIHAB","slug":"alshihab","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43612338?v=4","header":null,"created_at":"2024-01-16T00:14:47.000000Z","updated_at":"2024-01-16T00:14:47.000000Z","pivot":{"component_id":6244,"user_id":16381}},{"id":17146,"name":"Vokirok","slug":"vokirok","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/49db19e61cecef771680f5d0a712b952","header":null,"created_at":"2024-02-24T01:00:35.000000Z","updated_at":"2024-02-24T01:00:35.000000Z","pivot":{"component_id":6244,"user_id":17146}},{"id":12120,"name":"tiagofrancafernandes","slug":"tiagofrancafernandes","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/8310974?v=4","header":null,"created_at":"2023-04-28T16:12:23.000000Z","updated_at":"2023-04-28T16:12:23.000000Z","pivot":{"component_id":6244,"user_id":12120}},{"id":17164,"name":"atulmahankal","slug":"atulmahankal","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/49853440?v=4","header":null,"created_at":"2024-02-24T21:04:43.000000Z","updated_at":"2024-02-24T21:04:43.000000Z","pivot":{"component_id":6244,"user_id":17164}},{"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":6244,"user_id":13886}},{"id":17191,"name":"MatrixMe00","slug":"matrixme00","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/67325727?v=4","header":null,"created_at":"2024-02-26T07:25:51.000000Z","updated_at":"2024-02-26T07:25:51.000000Z","pivot":{"component_id":6244,"user_id":17191}},{"id":1422,"name":"wallaceosmar","slug":"wallaceosmar","bio":null,"avatar":"https:\/\/avatars0.githubusercontent.com\/u\/7277078?v=4","header":null,"created_at":"2020-10-25T01:12:04.000000Z","updated_at":"2020-10-25T01:12:04.000000Z","pivot":{"component_id":6244,"user_id":1422}},{"id":16988,"name":"mrjurabek","slug":"mrjurabek","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/69756387?v=4","header":null,"created_at":"2024-02-16T10:07:39.000000Z","updated_at":"2024-02-16T10:07:39.000000Z","pivot":{"component_id":6244,"user_id":16988}},{"id":17279,"name":"AviPeltz","slug":"avipeltz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/11849162?v=4","header":null,"created_at":"2024-02-29T18:44:43.000000Z","updated_at":"2024-02-29T18:44:43.000000Z","pivot":{"component_id":6244,"user_id":17279}},{"id":4463,"name":"banny","slug":"banny","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/6dc5e4950b260687309cb98b1e54a539","header":null,"created_at":"2021-08-02T10:34:12.000000Z","updated_at":"2024-05-23T04:50:18.000000Z","pivot":{"component_id":6244,"user_id":4463}},{"id":17304,"name":"UDHAY KUMAR","slug":"udhay-kumar","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/dd439560cef236f2be7fda671700ad89","header":null,"created_at":"2024-03-02T05:28:55.000000Z","updated_at":"2024-03-02T05:28:55.000000Z","pivot":{"component_id":6244,"user_id":17304}},{"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":6244,"user_id":6135}},{"id":17339,"name":"JosemAVSG","slug":"josemavsg","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/107879363?v=4","header":null,"created_at":"2024-03-04T08:20:20.000000Z","updated_at":"2024-03-04T08:20:20.000000Z","pivot":{"component_id":6244,"user_id":17339}},{"id":16770,"name":"guibe22","slug":"guibe22","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/123315885?v=4","header":null,"created_at":"2024-02-05T17:33:44.000000Z","updated_at":"2024-02-05T17:33:44.000000Z","pivot":{"component_id":6244,"user_id":16770}},{"id":17468,"name":"fabiantorresm","slug":"fabiantorresm","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/6262596?v=4","header":null,"created_at":"2024-03-10T06:44:07.000000Z","updated_at":"2024-03-10T06:44:07.000000Z","pivot":{"component_id":6244,"user_id":17468}},{"id":17495,"name":"47ALchemisT","slug":"47alchemist","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/123806206?v=4","header":null,"created_at":"2024-03-11T10:12:46.000000Z","updated_at":"2024-03-11T10:12:46.000000Z","pivot":{"component_id":6244,"user_id":17495}},{"id":17386,"name":"FernyCastro8","slug":"fernycastro8","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/124219457?v=4","header":null,"created_at":"2024-03-06T05:46:07.000000Z","updated_at":"2024-03-06T05:46:07.000000Z","pivot":{"component_id":6244,"user_id":17386}},{"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":6244,"user_id":4536}},{"id":17859,"name":"jungmikyung","slug":"jungmikyung","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/07c6bdf4834e59d3fbade99d76af3c7b","header":null,"created_at":"2024-03-27T07:11:34.000000Z","updated_at":"2024-03-27T07:11:34.000000Z","pivot":{"component_id":6244,"user_id":17859}},{"id":5491,"name":"starkbaum","slug":"starkbaum","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/5096854?v=4","header":null,"created_at":"2021-10-19T17:30:00.000000Z","updated_at":"2021-10-19T17:30:00.000000Z","pivot":{"component_id":6244,"user_id":5491}},{"id":18656,"name":"Tim2319","slug":"tim2319","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/138693618?v=4","header":null,"created_at":"2024-05-07T03:10:44.000000Z","updated_at":"2024-05-07T03:10:44.000000Z","pivot":{"component_id":6244,"user_id":18656}},{"id":9316,"name":"dev asp id","slug":"dev-asp-id","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/89f772da5404c3ac5ac57106c6f104af","header":null,"created_at":"2022-10-09T04:15:56.000000Z","updated_at":"2022-10-09T04:15:56.000000Z","pivot":{"component_id":6244,"user_id":9316}},{"id":18953,"name":"iemchuu","slug":"iemchuu","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/26268703?v=4","header":null,"created_at":"2024-05-23T03:30:15.000000Z","updated_at":"2024-05-23T03:30:15.000000Z","pivot":{"component_id":6244,"user_id":18953}},{"id":19084,"name":"KingAurjohn","slug":"kingaurjohn","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/158538893?v=4","header":null,"created_at":"2024-05-29T13:49:05.000000Z","updated_at":"2024-05-29T13:49:05.000000Z","pivot":{"component_id":6244,"user_id":19084}},{"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":6244,"user_id":19124}},{"id":16001,"name":"acfatah","slug":"acfatah","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/961643?v=4","header":null,"created_at":"2023-12-23T05:13:01.000000Z","updated_at":"2023-12-23T05:13:01.000000Z","pivot":{"component_id":6244,"user_id":16001}},{"id":5975,"name":"JCfUZQsq","slug":"jcfuzqsq","bio":"555","avatar":"https:\/\/www.gravatar.com\/avatar\/553f9e0f719254abcdf5b9bf51bc358c","header":null,"created_at":"2021-11-29T22:23:52.000000Z","updated_at":"2024-05-22T19:53:09.000000Z","pivot":{"component_id":6244,"user_id":5975}},{"id":19872,"name":"Igor097","slug":"igor097","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/26531334?v=4","header":null,"created_at":"2024-07-19T11:28:44.000000Z","updated_at":"2024-07-19T11:28:44.000000Z","pivot":{"component_id":6244,"user_id":19872}},{"id":19931,"name":"adrianopxx","slug":"adrianopxx","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/23421884?v=4","header":null,"created_at":"2024-07-23T20:00:28.000000Z","updated_at":"2024-07-23T20:00:28.000000Z","pivot":{"component_id":6244,"user_id":19931}},{"id":16194,"name":"SynFunjioka","slug":"synfunjioka","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/47235988?v=4","header":null,"created_at":"2024-01-04T21:11:00.000000Z","updated_at":"2024-01-04T21:11:00.000000Z","pivot":{"component_id":6244,"user_id":16194}},{"id":20150,"name":"nicolasjrz","slug":"nicolasjrz-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/61887365?v=4","header":null,"created_at":"2024-08-14T15:26:13.000000Z","updated_at":"2024-08-14T15:26:13.000000Z","pivot":{"component_id":6244,"user_id":20150}},{"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":6244,"user_id":20248}},{"id":17542,"name":"YthelFR","slug":"ythelfr","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/110157294?v=4","header":null,"created_at":"2024-03-13T10:45:53.000000Z","updated_at":"2024-03-13T10:45:53.000000Z","pivot":{"component_id":6244,"user_id":17542}},{"id":4918,"name":"M-erick","slug":"m-erick","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/61746940?v=4","header":null,"created_at":"2021-09-08T17:04:49.000000Z","updated_at":"2021-09-08T17:04:49.000000Z","pivot":{"component_id":6244,"user_id":4918}}]}" :edit="false">
123ApplePie

Community Rate

Related components

tailwind Layout With Header Sidebar And Rightbar
trfi
Layout With Header Sidebar And Rightbar trfi
2.1
tailwind Messanger Design Mohit Dhiman
Messanger Design

Premium component by Mohit Dhiman

3.0
tailwind Tailwind CSS Login
gabyceballos
Tailwind CSS Login gabyceballos
3.0
tailwind Mac Terminal
laraben
Mac Terminal laraben
1.0
tailwind Placeholder card
natecorkish
Placeholder card natecorkish
2.2
tailwind Tailwind CSS Group list
Anonymous
Tailwind CSS Group list Anonymous
2.2
See more components