Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Sarun Mungthanya
SpnPatch-Laravel
Commits
930e8709
Commit
930e8709
authored
Jul 02, 2024
by
Sarun Mungthanya
Browse files
add , reload , delete patch
parent
5bad2db9
Changes
90
Hide whitespace changes
Inline
Side-by-side
Too many changes to show.
To preserve performance only
90 of 90+
files are displayed.
Plain diff
Email patch
resources/views/pages/dashboards-meetings.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Meeting Dashboard"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"mt-6 flex flex-col items-center justify-between space-y-2 text-center sm:flex-row sm:space-y-0 sm:text-left"
>
<div>
<h3
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
Your Meetings
</h3>
<p
class=
"mt-1 hidden sm:block"
>
Recent meetings in your team
</p>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Team Members
</p>
<div
class=
"mt-2 flex space-x-2"
>
<div
class=
"avatar h-8 w-8"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
</div>
</div>
<div
class=
"mt-4"
>
<h3
class=
"text-base font-medium text-slate-600 dark:text-navy-100"
>
Today
</h3>
<div
class=
"mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6"
>
<div
class=
"card justify-between bg-primary p-4 dark:bg-accent sm:p-5"
>
<div
class=
"flex items-center space-x-3 text-white"
>
<img
class=
"h-10 w-10 shrink-0 rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div>
<h3
class=
"text-base font-medium"
>
Product Roadmap Q4
</h3>
<p
class=
"text-xs text-indigo-100"
>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+ text-indigo-100"
>
Today
</p>
<p
class=
"text-xl font-medium text-white"
>
11:30 - 13:00
</p>
<div
class=
"badge mt-2 rounded-full bg-white/20 text-white"
>
13 Members
</div>
<div
class=
"mt-5 flex items-center justify-between space-x-2"
>
<div
class=
"flex -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring-1 ring-primary dark:ring-accent"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring-1 ring-primary dark:ring-accent"
>
qa
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring-1 ring-primary dark:ring-accent"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"card justify-between p-4 sm:p-5"
>
<div
class=
"flex items-center space-x-3"
>
<img
class=
"h-10 w-10 shrink-0 rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div>
<h3
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
Design Review
</h3>
<p
class=
"text-xs"
>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+"
>
Today
</p>
<p
class=
"text-xl font-medium text-slate-700 dark:text-navy-100"
>
16:00 - 16:30
</p>
<div
class=
"badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
6 Members
</div>
<div
class=
"mt-5 flex items-center justify-between space-x-2"
>
<div
class=
"flex -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
iu
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"card justify-between p-4 sm:p-5"
>
<div
class=
"flex items-center space-x-4"
>
<img
class=
"h-10 w-10 shrink-0 rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div>
<h3
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
Weekly meeting
</h3>
<p
class=
"text-xs"
>
Consectetur adipisicing elit.
</p>
</div>
</div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+"
>
Today
</p>
<p
class=
"text-xl font-medium text-slate-700 dark:text-navy-100"
>
18:00 - 18:45
</p>
<div
class=
"badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
20 Members
</div>
<div
class=
"mt-5 flex items-center justify-between space-x-2"
>
<div
class=
"flex -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-warning text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
tg
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"mt-4 sm:mt-5 lg:mt-6"
>
<h3
class=
"text-base font-medium text-slate-600 dark:text-navy-100"
>
This week
</h3>
<div
class=
"mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6"
>
<div
class=
"card justify-between p-4 sm:p-5"
>
<div
class=
"flex items-center space-x-4"
>
<img
class=
"h-10 w-10 shrink-0 rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div>
<h3
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
Sales Presentation
</h3>
<p
class=
"text-xs"
>
Iure odio placeat temporibus.
</p>
</div>
</div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+"
>
Tomorrow
</p>
<p
class=
"text-xl font-medium text-slate-700 dark:text-navy-100"
>
11:30 - 12:00
</p>
<div
class=
"badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
7 Members
</div>
<div
class=
"mt-5 flex items-center justify-between space-x-2"
>
<div
class=
"flex -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-error text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
yt
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"card justify-between p-4 sm:p-5"
>
<div
class=
"flex items-center space-x-4"
>
<img
class=
"h-10 w-10 shrink-0 rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div>
<h3
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
Testing Vol.1
</h3>
<p
class=
"text-xs"
>
In iste labore odit sapiente?
</p>
</div>
</div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+"
>
THU, May 25, 2022
</p>
<p
class=
"text-xl font-medium text-slate-700 dark:text-navy-100"
>
14:30 - 15:00
</p>
<div
class=
"badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
5 Members
</div>
<div
class=
"mt-5 flex items-center justify-between space-x-2"
>
<div
class=
"flex -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-success text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
ou
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"mt-4 sm:mt-5 lg:mt-6"
>
<h3
class=
"text-base font-medium text-slate-600 dark:text-navy-100"
>
This month
</h3>
<div
class=
"mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6"
>
<div
class=
"card justify-between p-4 sm:p-5"
>
<div
class=
"flex items-center space-x-4"
>
<img
class=
"h-10 w-10 shrink-0 rounded-lg object-cover"
src=
"{{ asset('images/illustrations/dashboard-meet-dark.svg') }}"
alt=
"image"
/>
<div>
<h3
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
New App Analysis
</h3>
<p
class=
"text-xs"
>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+"
>
Mon, June 18, 2022
</p>
<p
class=
"text-xl font-medium text-slate-700 dark:text-navy-100"
>
08:00 - 09:00
</p>
<div
class=
"badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
10 Members
</div>
<div
class=
"mt-5 flex items-center justify-between space-x-2"
>
<div
class=
"flex -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
cv
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"card justify-between p-4 sm:p-5"
>
<div
class=
"flex items-center space-x-4"
>
<img
class=
"h-10 w-10 shrink-0 rounded-lg object-cover"
src=
"{{ asset('images/100x100.png') }}"
alt=
"image"
/>
<div>
<h3
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
React Conf
</h3>
<p
class=
"text-xs"
>
In iste labore odit sapiente?
</p>
</div>
</div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+"
>
SAT, June 21, 2022
</p>
<p
class=
"text-xl font-medium text-slate-700 dark:text-navy-100"
>
10:00 - 12:00
</p>
<div
class=
"badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
14 Members
</div>
<div
class=
"mt-5 flex items-center justify-between space-x-2"
>
<div
class=
"flex -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-warning text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
qd
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"card justify-between p-4 sm:p-5"
>
<div
class=
"flex items-center space-x-4"
>
<img
class=
"h-10 w-10 shrink-0 rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div>
<h3
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
Monthly meeting
</h3>
<p
class=
"text-xs"
>
Consectetur adipisicing elit.
</p>
</div>
</div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+"
>
MON, 31 June, 2022
</p>
<p
class=
"text-xl font-medium text-slate-700 dark:text-navy-100"
>
18:00 - 19:00
</p>
<div
class=
"badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
12 Members
</div>
<div
class=
"mt-5 flex items-center justify-between space-x-2"
>
<div
class=
"flex -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
mh
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-orders.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Orders Dashboard"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6"
>
<div
class=
"card col-span-12 lg:col-span-8"
>
<div
class=
"mt-3 flex flex-col justify-between px-4 sm:flex-row sm:items-center sm:px-5"
>
<div
class=
"flex flex-1 items-center justify-between space-x-2 sm:flex-initial"
>
<h2
class=
"text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Order Overview
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-start', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"hidden space-x-2 sm:flex"
x-data=
"{ activeTab: 'tabYearly' }"
>
<button
@
click=
"activeTab = 'tabMonthly'"
class=
"btn h-8 rounded-full text-xs font-medium"
:class=
"activeTab === 'tabMonthly' ?
'bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light' :
'hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 hover:text-slate-800 focus:text-slate-800 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 dark:hover:text-navy-100 dark:focus:text-navy-100'"
>
Monthly
</button>
<button
@
click=
"activeTab = 'tabYearly'"
class=
"btn h-8 rounded-full text-xs+ font-medium"
:class=
"activeTab === 'tabYearly' ?
'bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light' :
'hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 hover:text-slate-800 focus:text-slate-800 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 dark:hover:text-navy-100 dark:focus:text-navy-100'"
>
Yearly
</button>
</div>
</div>
<div
class=
"mt-4 grid grid-cols-2 gap-3 px-4 sm:mt-5 sm:grid-cols-4 sm:gap-5 sm:px-5 lg:mt-6"
>
<div
class=
"rounded-lg bg-slate-100 p-4 dark:bg-navy-600"
>
<div
class=
"flex justify-between space-x-1"
>
<p
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
$67.6k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-primary dark:text-accent"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<p
class=
"mt-1 text-xs+"
>
Income
</p>
</div>
<div
class=
"rounded-lg bg-slate-100 p-4 dark:bg-navy-600"
>
<div
class=
"flex justify-between"
>
<p
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
12.6K
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
/>
</svg>
</div>
<p
class=
"mt-1 text-xs+"
>
Completed
</p>
</div>
<div
class=
"rounded-lg bg-slate-100 p-4 dark:bg-navy-600"
>
<div
class=
"flex justify-between"
>
<p
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
143
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-warning"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<p
class=
"mt-1 text-xs+"
>
Pending
</p>
</div>
<div
class=
"rounded-lg bg-slate-100 p-4 dark:bg-navy-600"
>
<div
class=
"flex justify-between"
>
<p
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
651
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-info"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
d=
"M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
/>
</svg>
</div>
<p
class=
"mt-1 text-xs+"
>
Dispatch
</p>
</div>
</div>
<div
class=
"ax-transparent-gridline mt-2 px-2"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.ordersOverview);
$el._x_chart.render()
});"
></div>
</div>
</div>
<div
class=
"col-span-12 grid grid-cols-2 gap-4 sm:grid-cols-4 sm:gap-5 lg:col-span-4 lg:grid-cols-2 lg:gap-6"
>
<div
class=
"card col-span-2 px-4 pb-5 sm:px-5"
>
<div
class=
"flex items-center justify-between py-3"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Budget
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"flex grow space-x-5"
>
<div
class=
"flex w-1/2 flex-col"
>
<div
class=
"grow"
>
<p
class=
"text-2xl font-semibold text-slate-700 dark:text-navy-100"
>
$67.4k
</p>
<a
href=
"#"
class=
"border-b border-dotted border-current pb-0.5 text-tiny font-medium uppercase text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70"
>
Yearly Budget
</a>
</div>
<p
class=
"mt-2 text-xs leading-normal line-clamp-3"
>
You have spent about 25% of your annual budget.
</p>
</div>
<div
class=
"ax-transparent-gridline flex w-1/2 items-end"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.orderBudget);
$el._x_chart.render()
});"
></div>
</div>
</div>
</div>
<div
class=
"card"
>
<div
class=
"mt-3 flex items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Income
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-2 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p
class=
"grow px-4 text-xl font-semibold text-slate-700 dark:text-navy-100 sm:px-5"
>
$169.6k
</p>
<div
class=
"ax-transparent-gridline"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.orderIncome);
$el._x_chart.render()
});"
></div>
</div>
</div>
<div
class=
"card"
>
<div
class=
"mt-3 flex items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Expense
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-2 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p
class=
"grow px-4 text-xl font-semibold text-slate-700 dark:text-navy-100 sm:px-5"
>
$34.6k
</p>
<div
class=
"ax-transparent-gridline"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.orderExpense);
$el._x_chart.render()
});"
></div>
</div>
</div>
</div>
<div
class=
"card col-span-12 pb-2 lg:col-span-5 xl:col-span-6"
>
<div
class=
"my-3 flex items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Top Sellers
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"scrollbar-sm flex space-x-3 overflow-x-auto px-4 pb-3 sm:px-5"
>
<div
class=
"w-56 shrink-0 rounded-xl bg-slate-50 p-4 dark:bg-navy-600"
>
<div
class=
"flex flex-col items-center space-y-3 text-center"
>
<div
class=
"h-16 w-16 rounded-full bg-gradient-to-r from-sky-400 to-blue-600 p-0.5"
>
<img
class=
"h-full w-full rounded-full border-2 border-white object-cover object-center dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
Travis Fuller
</p>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Salesman
</p>
</div>
</div>
<div
class=
"mt-5"
>
<div>
<p>
Sales
</p>
<div
class=
"mt-0.5 flex space-x-2"
>
<p
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
2 348
</p>
<p
class=
"flex items-center space-x-0.5 text-xs text-success"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
<span>
4.3%
</span>
</p>
</div>
</div>
<div
class=
"ax-transparent-gridline"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.topSeller1);
$el._x_chart.render()
});"
></div>
</div>
</div>
<div
class=
"mt-5 flex justify-center space-x-2"
>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
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"
/>
</svg>
</button>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
</button>
</div>
</div>
<div
class=
"w-56 shrink-0 rounded-xl bg-slate-50 p-4 dark:bg-navy-600"
>
<div
class=
"flex flex-col items-center space-y-3 text-center"
>
<div
class=
"h-16 w-16 rounded-full bg-gradient-to-r from-sky-400 to-blue-600 p-0.5"
>
<img
class=
"h-full w-full rounded-full border-2 border-white object-cover object-center dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
Konnor Guzman
</p>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Salesman
</p>
</div>
</div>
<div
class=
"mt-5"
>
<div>
<p>
Sales
</p>
<div
class=
"mt-0.5 flex space-x-2"
>
<p
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
6 052
</p>
<p
class=
"flex items-center space-x-0.5 text-xs text-error"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M17 13l-5 5m0 0l-5-5m5 5V6"
/>
</svg>
<span>
2.33%
</span>
</p>
</div>
</div>
<div
class=
"ax-transparent-gridline"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.topSeller2);
$el._x_chart.render()
});"
></div>
</div>
</div>
<div
class=
"mt-5 flex justify-center space-x-2"
>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
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"
/>
</svg>
</button>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
</button>
</div>
</div>
<div
class=
"w-56 shrink-0 rounded-xl bg-slate-50 p-4 dark:bg-navy-600"
>
<div
class=
"flex flex-col items-center space-y-3 text-center"
>
<div
class=
"h-16 w-16 rounded-full bg-gradient-to-r from-sky-400 to-blue-600 p-0.5"
>
<img
class=
"h-full w-full rounded-full border-2 border-white object-cover object-center dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
Katrina West
</p>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Saleswoman
</p>
</div>
</div>
<div
class=
"mt-5"
>
<div>
<p>
Sales
</p>
<div
class=
"mt-0.5 flex space-x-2"
>
<p
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
2 348
</p>
<p
class=
"flex items-center space-x-0.5 text-xs text-success"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-3 w-3"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M5 10l7-7m0 0l7 7m-7-7v18"
/>
</svg>
<span>
3.33%
</span>
</p>
</div>
</div>
<div
class=
"ax-transparent-gridline"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.topSeller3);
$el._x_chart.render()
});"
></div>
</div>
</div>
<div
class=
"mt-5 flex justify-center space-x-2"
>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
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"
/>
</svg>
</button>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
</button>
</div>
</div>
<div
class=
"w-56 shrink-0 rounded-xl bg-slate-50 p-4 dark:bg-navy-600"
>
<div
class=
"flex flex-col items-center space-y-3 text-center"
>
<div
class=
"h-16 w-16 rounded-full bg-gradient-to-r from-sky-400 to-blue-600 p-0.5"
>
<img
class=
"h-full w-full rounded-full border-2 border-white object-cover object-center dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
Henry Curtis
</p>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Salesman
</p>
</div>
</div>
<div
class=
"mt-5"
>
<div>
<p>
Sales
</p>
<div
class=
"mt-0.5 flex space-x-2"
>
<p
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
4 574
</p>
<p
class=
"flex items-center space-x-0.5 text-xs text-success"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-3 w-3"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M5 10l7-7m0 0l7 7m-7-7v18"
/>
</svg>
<span>
1.2%
</span>
</p>
</div>
</div>
<div
class=
"ax-transparent-gridline"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.topSeller4);
$el._x_chart.render()
});"
></div>
</div>
</div>
<div
class=
"mt-5 flex justify-center space-x-2"
>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
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"
/>
</svg>
</button>
<button
class=
"btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
class=
"col-span-12 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:col-span-7 lg:gap-6 xl:col-span-6"
>
<div
class=
"card px-4 pb-5 sm:px-5"
>
<div
class=
"flex items-center justify-between py-3"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Social Traffic
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p>
<span
class=
"text-2xl text-slate-700 dark:text-navy-100"
>
135K
</span>
<span
class=
"text-xs text-success"
>
+3.1%
</span>
</p>
<p
class=
"text-xs+"
>
View in this month
</p>
</div>
<div
class=
"mt-5 space-y-4"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/100x100.png') }}"
alt=
"flag"
/>
<p>
Instagram
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
34.3k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/100x100.png') }}"
alt=
"flag"
/>
<p>
Facebook
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
17.72k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/100x100.png') }}"
alt=
"flag"
/>
<p>
Youtube
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
12.41k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-error"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M17 13l-5 5m0 0l-5-5m5 5V6"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/100x100.png') }}"
alt=
"flag"
/>
<p>
Pinterest
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
11.89k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/100x100.png') }}"
alt=
"flag"
/>
<p>
Discord
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
9.47k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/100x100.png') }}"
alt=
"flag"
/>
<p>
TikTok
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
8.11k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-error"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M17 13l-5 5m0 0l-5-5m5 5V6"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/100x100.png') }}"
alt=
"flag"
/>
<p>
Twitter
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
5.98k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/100x100.png') }}"
alt=
"flag"
/>
<p>
Tumblr
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
2.7k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class=
"card px-4 pb-5 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Top Countries
</h2>
<a
href=
"#"
class=
"border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70"
>
View All
</a>
</div>
<div>
<p>
<span
class=
"text-2xl text-slate-700 dark:text-navy-100"
>
64
</span>
</p>
<p
class=
"text-xs+"
>
Countries
</p>
</div>
<div
class=
"mt-5 space-y-4"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/australia-round.svg') }}"
alt=
"flag"
/>
<p>
Australia
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
$6.41k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/brazil-round.svg') }}"
alt=
"flag"
/>
<p>
Brazil
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
$2.33k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/china-round.svg') }}"
alt=
"flag"
/>
<p>
China
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
$7.21k
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/india-round.svg') }}"
alt=
"flag"
/>
<p>
India
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
$754
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-error"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M17 13l-5 5m0 0l-5-5m5 5V6"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/italy-round.svg') }}"
alt=
"flag"
/>
<p>
Italy
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
$699
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/japan-round.svg') }}"
alt=
"flag"
/>
<p>
Japan
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
$624
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/russia-round.svg') }}"
alt=
"flag"
/>
<p>
Russia
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
$574
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-error"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M17 13l-5 5m0 0l-5-5m5 5V6"
/>
</svg>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/spain-round.svg') }}"
alt=
"flag"
/>
<p>
Spain
</p>
</div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"text-sm+ text-slate-800 dark:text-navy-100"
>
$506
</p>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 text-success"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div
class=
"col-span-12"
>
<div
class=
"flex items-center justify-between"
>
<h2
class=
"text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Latest Orders
</h2>
<div
class=
"flex"
>
<div
class=
"flex items-center"
x-data=
"{ isInputActive: false }"
>
<label
class=
"block"
>
<input
x-effect=
"isInputActive === true && $nextTick(() => { $el.focus()});"
:class=
"isInputActive ? 'w-32 lg:w-48' : 'w-0'"
class=
"form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200"
placeholder=
"Search here..."
type=
"text"
/>
</label>
<button
@
click=
"isInputActive = !isInputActive"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card mt-3"
>
<div
class=
"is-scrollbar-hidden min-w-full overflow-x-auto"
>
<table
class=
"is-hoverable w-full text-left"
>
<thead>
<tr>
<th
class=
"whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Order
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Date
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Address
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Order Status
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Payment
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Total
</th>
<th
class=
"whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
</th>
</tr>
</thead>
<tbody>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#95647
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
25 May 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
01:25 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Anthony Jensen
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
260 W. Storm Street New York, NY 10025.
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-warning/10 text-warning dark:bg-warning/15"
>
Unconfirmed
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-warning"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Await Auth
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$2 654
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#84895
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
03 May 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
09:44 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
John Due
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
13811 Gimbert Ln Santa Ana, California(CA), 92705
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-success/10 text-success dark:bg-success/15"
>
Completed
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-success"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Paid
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$3 654
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#49756
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
19 Jun 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
5:43 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Tom Robert
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
3803 Fox Rd Huron, Ohio(OH), 44839
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
Shipped
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-success"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Paid
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$6 156
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#79632
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
03 Jun 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
4:54 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Nolan Doe
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
1805 Jackson Ave Seaford, New York(NY), 11783
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
Processing
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-success"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Paid
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$7 621
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#12668
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
09 Jun 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
2:03 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Henry Curtis
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
421 Basswood Ln Haysville, Kansas(KS), 67060
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-error/10 text-error dark:bg-error/15"
>
Cancelled
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-error"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Failed
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$456
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#66463
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
23 Jul 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
9:11 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Katrina West
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
205 Hope Rd Helena, Montana(MT), 59602
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-warning/10 text-warning dark:bg-warning/15"
>
Unconfirmed
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-warning"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Await Auth
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$5 116
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#53133
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
11 Aug 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
12:11 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Lance Tucker
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
1805 Jackson Ave Seaford, New York(NY), 11783
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-warning/10 text-warning dark:bg-warning/15"
>
Unconfirmed
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-warning"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Await Auth
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$4 952
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#5684
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
11 May 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
07:55 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Raul Bradley
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
13811 Gimbert Ln Santa Ana, California(CA), 92705
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-success/10 text-success dark:bg-success/15"
>
Completed
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-success"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Paid
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$5 137
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#64669
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
29 Jun 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
1:54 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Derrick
Simmons
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
3803 Fox Rd Huron, Ohio(OH), 44839
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
Shipped
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-success"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Paid
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$2 566
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-primary dark:text-accent-light"
>
#31669
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium"
>
08 Jun 2021
</p>
<p
class=
"mt-0.5 text-xs"
>
7:36 AM
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"avatar h-9 w-9"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Samantha
Shelton
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"w-48 overflow-hidden text-ellipsis text-xs+"
>
1805 Jackson Ave Seaford, New York(NY), 11783
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
>
Processing
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-xs+ text-success"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Paid
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"text-sm+ font-medium text-slate-700 dark:text-navy-100"
>
$9 665
</p>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class=
"flex flex-col justify-between space-y-4 px-4 py-4 sm:flex-row sm:items-center sm:space-y-0 sm:px-5"
>
<div
class=
"flex items-center space-x-2 text-xs+"
>
<span>
Show
</span>
<label
class=
"block"
>
<select
class=
"form-select rounded-full border border-slate-300 bg-white px-2 py-1 pr-6 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
>
<option>
10
</option>
<option>
30
</option>
<option>
50
</option>
</select>
</label>
<span>
entries
</span>
</div>
<ol
class=
"pagination"
>
<li
class=
"rounded-l-lg bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 19l-7-7 7-7"
/>
</svg>
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
1
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
2
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
3
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
4
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
5
</a>
</li>
<li
class=
"rounded-r-lg bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</a>
</li>
</ol>
<div
class=
"text-xs+"
>
1 - 10 of 10 entries
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-personal.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Personal Dashboard"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6"
>
<div
class=
"col-span-12 space-y-4 sm:space-y-5 lg:col-span-8 lg:space-y-6"
>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-5 lg:gap-6"
>
<div
class=
"card bg-gradient-to-r from-blue-500 to-indigo-600 px-5 pb-5"
>
<div>
<div
class=
"ax-transparent-gridline mt-5 w-1/2"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.earningWhite);
$el._x_chart.render()
});"
></div>
</div>
<p
class=
"mt-3 text-base font-medium tracking-wide text-indigo-100"
>
Earnings
</p>
<p
class=
"mt-4 font-inter text-2xl font-semibold"
>
<span
class=
"text-indigo-100"
>
$
</span>
<span
class=
"text-white"
>
31.313
</span>
</p>
<div
class=
"badge mt-2 rounded-full bg-black/20 text-indigo-50"
>
13 Members
</div>
</div>
<div
class=
"absolute bottom-0 right-0 overflow-hidden rounded-lg"
>
<img
class=
"w-24 translate-x-1/4 translate-y-1/4 opacity-50"
src=
"{{ asset('images/illustrations/the-dollar.svg') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"grid grid-cols-1 gap-4 sm:col-span-2 sm:grid-cols-2 sm:gap-5 lg:gap-6"
>
<div
class=
"card justify-center p-4.5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-base font-semibold text-slate-700 dark:text-navy-100"
>
56
</p>
<p
class=
"text-xs+ line-clamp-1"
>
Projects
</p>
</div>
<div
class=
"mask is-star flex h-10 w-10 shrink-0 items-center justify-center bg-success"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-white"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
/>
</svg>
</div>
</div>
<div>
<div
class=
"badge mt-2 space-x-1 bg-success/10 py-1 px-1.5 text-success dark:bg-success/15"
>
<span>
10%
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-3.5 w-3.5"
viewBox=
"0 0 20 20"
fill=
"currentColor"
>
<path
fill-rule=
"evenodd"
d=
"M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule=
"evenodd"
/>
</svg>
</div>
</div>
</div>
<div
class=
"card justify-center p-4.5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-base font-semibold text-slate-700 dark:text-navy-100"
>
324
</p>
<p
class=
"text-xs+ line-clamp-1"
>
Total hours
</p>
</div>
<div
class=
"mask is-star flex h-10 w-10 shrink-0 items-center justify-center bg-info"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-white"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
</div>
<div>
<div
class=
"badge mt-2 space-x-1 bg-success/10 py-1 px-1.5 text-success dark:bg-success/15"
>
<span>
6%
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-3.5 w-3.5"
viewBox=
"0 0 20 20"
fill=
"currentColor"
>
<path
fill-rule=
"evenodd"
d=
"M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule=
"evenodd"
/>
</svg>
</div>
</div>
</div>
<div
class=
"card justify-center p-4.5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-base font-semibold text-slate-700 dark:text-navy-100"
>
7
</p>
<p
class=
"text-xs+ line-clamp-1"
>
Support Ticket
</p>
</div>
<div
class=
"mask is-star flex h-10 w-10 shrink-0 items-center justify-center bg-secondary"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-white"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
</div>
</div>
<div>
<div
class=
"badge mt-2 space-x-1 bg-success/10 py-1 px-1.5 text-success dark:bg-success/15"
>
<span>
9%
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-3.5 w-3.5"
viewBox=
"0 0 20 20"
fill=
"currentColor"
>
<path
fill-rule=
"evenodd"
d=
"M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule=
"evenodd"
/>
</svg>
</div>
</div>
</div>
<div
class=
"card justify-center p-4.5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-base font-semibold text-slate-700 dark:text-navy-100"
>
56
</p>
<p
class=
"text-xs+ line-clamp-1"
>
Active Task
</p>
</div>
<div
class=
"mask is-star flex h-10 w-10 shrink-0 items-center justify-center bg-warning"
>
<svg
class=
"h-5 w-5 text-white"
viewBox=
"0 0 24 24"
fill=
"none"
stroke=
"currentColor"
xmlns=
"http://www.w3.org/2000/svg"
>
<path
d=
"M12.5293 18L20.9999 8.40002"
stroke-width=
"1.5"
stroke-linecap=
"round"
stroke-linejoin=
"round"
/>
<path
d=
"M3 13.2L7.23529 18L17.8235 6"
stroke-width=
"1.5"
stroke-linecap=
"round"
stroke-linejoin=
"round"
/>
</svg>
</div>
</div>
<div>
<div
class=
"badge mt-2 space-x-1 bg-error/10 py-1 px-1.5 text-error dark:bg-error/15"
>
<span>
6%
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-3.5 w-3.5"
viewBox=
"0 0 20 20"
fill=
"currentColor"
>
<path
fill-rule=
"evenodd"
d=
"M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule=
"evenodd"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div>
<div
class=
"flex items-center justify-between"
>
<h2
class=
"text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Ongoing Projects
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"mt-3 space-y-3.5"
>
<div
class=
"card p-3"
>
<div
class=
"flex items-center space-x-3"
>
<img
class=
"h-10 w-10 rounded-lg object-cover object-center"
src=
"{{ asset('images/illustrations/lms-ui.svg') }}"
alt=
"image"
/>
<div
class=
"flex-1"
>
<div
class=
"flex justify-between"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
LMS App Design
</p>
</div>
<div
class=
"mt-0.5 flex text-xs text-slate-400 dark:text-navy-300"
>
<p>
Updated at 7 Sep
</p>
<div
class=
"mx-2 my-1 hidden w-px bg-slate-200 dark:bg-navy-500 sm:flex"
></div>
<p
class=
"hidden sm:flex"
>
Deadline: 25.08.2020
</p>
</div>
</div>
</div>
<p
class=
"-mt-3 text-right text-xs font-medium text-primary dark:text-accent-light"
>
24%
</p>
<div
class=
"progress mt-2 h-1.5 bg-slate-150 dark:bg-navy-500"
>
<div
class=
"is-active relative w-4/12 overflow-hidden rounded-full bg-primary dark:bg-accent"
>
</div>
</div>
</div>
<div
class=
"card p-3"
>
<div
class=
"flex items-center space-x-3"
>
<img
class=
"h-10 w-10 rounded-lg object-cover object-center"
src=
"{{ asset('images/illustrations/store-ui.svg') }}"
alt=
"image"
/>
<div
class=
"flex-1"
>
<div
class=
"flex justify-between"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Store Dashboard
</p>
</div>
<div
class=
"mt-0.5 flex text-xs text-slate-400 dark:text-navy-300"
>
<p>
Updated a hour ago
</p>
<div
class=
"mx-2 my-1 hidden w-px bg-slate-200 dark:bg-navy-500 sm:flex"
></div>
<p
class=
"hidden sm:flex"
>
Deadline: 21.08.2020
</p>
</div>
</div>
</div>
<p
class=
"-mt-3 text-right text-xs font-medium text-secondary dark:text-secondary-light"
>
56%
</p>
<div
class=
"progress mt-2 h-1.5 bg-secondary/15 dark:bg-secondary-light/25"
>
<div
class=
"w-6/12 rounded-full bg-secondary"
></div>
</div>
</div>
<div
class=
"card p-3"
>
<div
class=
"flex items-center space-x-3"
>
<img
class=
"h-10 w-10 rounded-lg object-cover object-center"
src=
"{{ asset('images/illustrations/chat-ui.svg') }}"
alt=
"image"
/>
<div
class=
"flex-1"
>
<div
class=
"flex justify-between"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Chat Mobile App
</p>
</div>
<div
class=
"mt-0.5 flex text-xs text-slate-400 dark:text-navy-300"
>
<p>
Updated 3 days ago
</p>
<div
class=
"mx-2 my-1 hidden w-px bg-slate-200 dark:bg-navy-500 sm:flex"
></div>
<p
class=
"hidden sm:flex"
>
Deadline: 16.09.2020
</p>
</div>
</div>
</div>
<p
class=
"-mt-3 text-right text-xs font-medium text-warning"
>
64%
</p>
<div
class=
"progress mt-2 h-1.5 bg-warning/15 dark:bg-warning/25"
>
<div
class=
"w-7/12 rounded-full bg-warning"
></div>
</div>
</div>
<div
class=
"card p-3"
>
<div
class=
"flex items-center space-x-3"
>
<img
class=
"h-10 w-10 rounded-lg object-cover object-center"
src=
"{{ asset('images/illustrations/nft.svg') }}"
alt=
"image"
/>
<div
class=
"flex-1"
>
<div
class=
"flex justify-between"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
NFT Marketplace App
</p>
</div>
<div
class=
"mt-0.5 flex text-xs text-slate-400 dark:text-navy-300"
>
<p>
Updated a week ago
</p>
<div
class=
"mx-2 my-1 hidden w-px bg-slate-200 dark:bg-navy-500 sm:flex"
></div>
<p
class=
"hidden sm:flex"
>
Deadline: 26.11.2020
</p>
</div>
</div>
</div>
<p
class=
"-mt-3 text-right text-xs font-medium text-info"
>
14%
</p>
<div
class=
"progress mt-2 h-1.5 bg-info/15 dark:bg-info/25"
>
<div
class=
"w-2/12 rounded-full bg-info"
></div>
</div>
</div>
</div>
</div>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:gap-6"
>
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Contact List
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"space-y-3.5"
x-data=
"{ expandedItem: 'item-1' }"
>
<div
x-data=
"accordionItem('item-1')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Konnor Guzman
</h3>
<p
class=
"mt-0.5 text-xs line-clamp-1"
>
(01) 22 888 4444
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-2')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Alfredo Elliott
</h3>
<p
class=
"mt-0.5 text-xs line-clamp-1"
>
(095)-800-8313
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-3')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<div
class=
"is-initial rounded-full bg-info text-sm+ uppercase text-white"
>
ds
</div>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Derrick Simmons
</h3>
<p
class=
"mt-0.5 text-xs line-clamp-1"
>
(350)-813-3861
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-4')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Henry Curtis
</h3>
<p
class=
"mt-0.5 text-xs line-clamp-1"
>
(675)-975-0083
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-5')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
John Doe
</h3>
<p
class=
"mt-0.5 text-xs line-clamp-1"
>
(727)-810-3880
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Recent Payments
</h2>
<a
href=
"#"
class=
"border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70"
>
View
All
</a>
</div>
<div
class=
"space-y-3.5"
>
<div
class=
"flex cursor-pointer items-center justify-between"
>
<div
class=
"flex items-center space-x-3.5"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Konnor Guzman
</p>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Dec 21, 2021 - 08:05
</p>
</div>
</div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
$660.22
</p>
</div>
<div
class=
"flex cursor-pointer items-center justify-between"
>
<div
class=
"flex items-center space-x-3.5"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Henry Curtis
</p>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Dec 19, 2021 - 11:55
</p>
</div>
</div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
$33.63
</p>
</div>
<div
class=
"flex cursor-pointer items-center justify-between"
>
<div
class=
"flex items-center space-x-3.5"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Derrick Simmons
</p>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Dec 16, 2021 - 14:45
</p>
</div>
</div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
$674.63
</p>
</div>
<div
class=
"flex cursor-pointer items-center justify-between"
>
<div
class=
"flex items-center space-x-3.5"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Kartina West
</p>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Dec 13, 2021 - 11:30
</p>
</div>
</div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
$547.63
</p>
</div>
<div
class=
"flex cursor-pointer items-center justify-between"
>
<div
class=
"flex items-center space-x-3.5"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Samantha Shelton
</p>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Dec 10, 2021 - 09:41
</p>
</div>
</div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
$736.24
</p>
</div>
<div
class=
"flex cursor-pointer items-center justify-between"
>
<div
class=
"flex items-center space-x-3.5"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Joe Perkins
</p>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Dec 06, 2021 - 11:41
</p>
</div>
</div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
$736.24
</p>
</div>
</div>
</div>
</div>
</div>
<div
class=
"col-span-12 lg:col-span-4"
>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-1 lg:gap-6"
>
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Client Messages
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"space-y-4"
>
<div
class=
"flex cursor-pointer items-center justify-between space-x-2"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<div
class=
"flex items-center space-x-2"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Konnor Guzman
</p>
<div
class=
"flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-slate-200 px-1.5 text-tiny+ font-medium leading-none text-slate-800 dark:bg-navy-450 dark:text-white"
>
5
</div>
</div>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Hello Erick. Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<a
href=
"#"
class=
"hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</a>
</div>
<div
class=
"flex cursor-pointer items-center justify-between space-x-2"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Travis Fuller
</p>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Excepturi magni sequi voluptate.
</p>
</div>
</div>
<a
href=
"#"
class=
"hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</a>
</div>
<div
class=
"flex cursor-pointer items-center justify-between space-x-2"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Alfredo Elliott
</p>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Adipisicing eli itaque!
</p>
</div>
</div>
<a
href=
"#"
class=
"hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</a>
</div>
<div
class=
"flex cursor-pointer items-center justify-between space-x-2"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Derrick Simmons
</p>
<p
class=
"text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
Ad hic minus repudiandae.
</p>
</div>
</div>
<a
href=
"#"
class=
"hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</a>
</div>
</div>
</div>
<div
class=
"card"
>
<div
class=
"mt-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Income
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"ax-transparent-gridline pr-2"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.incomePersonal);
$el._x_chart.render()
});"
></div>
</div>
</div>
<div
class=
"card p-4"
>
<div
class=
"space-y-1 text-center font-inter text-xs+"
>
<div
class=
"flex items-center justify-between px-2 pb-4"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
January 2022
</p>
<div
class=
"-mr-1.5 flex space-x-2"
>
<button
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M15 19l-7-7 7-7"
/>
</svg>
</button>
<button
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M9 5l7 7-7 7"
/>
</svg>
</button>
</div>
</div>
<div
class=
"grid grid-cols-7 pb-2"
>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
SUN
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
MON
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
TUE
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
WED
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
THU
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
FRY
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
SAT
</div>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
29
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
30
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
31
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
1
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
2
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
3
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
4
</button>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
5
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
6
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
7
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
8
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
9
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
10
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
11
</button>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
12
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
13
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl font-medium text-primary hover:bg-primary/10 hover:text-primary dark:text-accent-light dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
14
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
15
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
16
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
17
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
18
</button>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
19
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
20
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
21
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
22
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
23
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
24
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
25
</button>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
26
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
27
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
28
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
29
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
30
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
1
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
2
</button>
</div>
</div>
</div>
<div
class=
"card"
>
<div>
<div
class=
"swiper"
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { pagination: { el: '.swiper-pagination', clickable: true } }))"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide p-4 sm:p-5"
>
<div
class=
"flex items-center justify-between"
>
<a
href=
"#"
class=
"font-inter font-medium tracking-wide transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
>
@twitteraccount
</a>
<i
class=
"fa-brands fa-twitter"
></i>
</div>
<p
class=
"mt-3 text-xs+"
>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloremque eaque iste libero neque.
</p>
<div
class=
"mt-2 pb-5 text-xs"
>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#PHP
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#ReactJS
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#NextJS
</a>
</div>
</div>
<div
class=
"swiper-slide p-4 sm:p-5"
>
<div
class=
"flex items-center justify-between"
>
<a
href=
"#"
class=
"font-inter font-medium tracking-wide transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
>
@twitteraccount
</a>
<i
class=
"fa-brands fa-twitter"
></i>
</div>
<p
class=
"mt-3 text-xs+"
>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloremque eaque iste libero neque.
</p>
<div
class=
"mt-2 pb-5 text-xs"
>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#PHP
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#ReactJS
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#NextJS
</a>
</div>
</div>
<div
class=
"swiper-slide p-4 sm:p-5"
>
<div
class=
"flex items-center justify-between"
>
<a
href=
"#"
class=
"font-inter font-medium tracking-wide transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
>
@twitteraccount
</a>
<i
class=
"fa-brands fa-twitter"
></i>
</div>
<p
class=
"mt-3 text-xs+"
>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloremque eaque iste libero neque.
</p>
<div
class=
"mt-2 pb-5 text-xs"
>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#PHP
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#ReactJS
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#NextJS
</a>
</div>
</div>
</div>
<div
class=
"swiper-pagination"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-project-boards.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Project Board"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"mt-6 flex flex-col items-center justify-between space-y-2 text-center sm:flex-row sm:space-y-0 sm:text-left"
>
<div>
<h3
class=
"text-xl font-semibold text-slate-700 dark:text-navy-100"
>
Projects Board
</h3>
<p
class=
"mt-1 hidden sm:block"
>
List of your ongoing projects
</p>
</div>
<button
class=
"btn space-x-2 bg-primary font-medium text-white shadow-lg shadow-primary/50 hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:shadow-accent/50 dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-indigo-50"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
<span>
New Project
</span>
</button>
</div>
<div
class=
"mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4"
>
<div
class=
"card shadow-none"
>
<div
class=
"flex flex-1 flex-col justify-between rounded-lg bg-warning p-4 sm:p-5"
>
<div>
<div
class=
"flex items-start justify-between"
>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<p
class=
"text-xs+ text-amber-50"
>
May 01, 2021
</p>
</div>
<h3
class=
"mt-3 font-medium text-white line-clamp-2"
>
Mobile App
</h3>
<p
class=
"text-xs+ text-amber-50"
>
Prototyping
</p>
</div>
<div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+ text-white"
>
Progress
</p>
<div
class=
"progress my-2 h-1.5 bg-white/30"
>
<span
class=
"w-8/12 rounded-full bg-white"
></span>
</div>
<p
class=
"text-right text-xs+ font-medium text-white"
>
78%
</p>
</div>
<div
class=
"mt-5 flex flex-wrap -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-warning"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full border-2 border-warning bg-info text-xs+ uppercase text-white"
>
jd
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-warning"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-warning"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div
class=
"mt-4 flex items-center justify-between space-x-2"
>
<div
class=
"badge h-5.5 rounded-full bg-black/20 px-2 text-xs+ text-white"
>
1 week left
</div>
<div>
<button
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
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"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card shadow-none"
>
<div
class=
"flex flex-1 flex-col justify-between rounded-lg bg-info/15 p-4 dark:bg-transparent sm:p-5"
>
<div>
<div
class=
"flex items-start justify-between"
>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<p
class=
"text-xs+"
>
June 04, 2021
</p>
</div>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
Design Learn Management System
</h3>
<p
class=
"text-xs+"
>
UI/UX Design
</p>
</div>
<div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+ text-slate-700 dark:text-navy-100"
>
Progress
</p>
<div
class=
"progress my-2 h-1.5 bg-info/15 dark:bg-info/25"
>
<div
class=
"w-4/12 rounded-full bg-info"
></div>
</div>
<p
class=
"text-right text-xs+ font-medium text-info"
>
25%
</p>
</div>
<div
class=
"mt-5 flex flex-wrap -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full border-2 border-white bg-warning text-xs+ uppercase text-white dark:border-navy-700"
>
ii
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div
class=
"mt-4 flex items-center justify-between space-x-2"
>
<div
class=
"badge h-5.5 rounded-full bg-info px-2 text-xs+ text-white"
>
2 week left
</div>
<div>
<button
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
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"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card shadow-none"
>
<div
class=
"flex flex-1 flex-col justify-between rounded-lg bg-secondary/15 p-4 dark:bg-transparent sm:p-5"
>
<div>
<div
class=
"flex items-start justify-between"
>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/illustrations/chat-ui.svg') }}"
alt=
"image"
/>
<p
class=
"text-xs+"
>
Oct 27, 2021
</p>
</div>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
Chat Mobile App
</h3>
<p
class=
"text-xs+"
>
Prototyping
</p>
</div>
<div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+ text-slate-700 dark:text-navy-100"
>
Progress
</p>
<div
class=
"progress my-2 h-1.5 bg-secondary/15 dark:bg-secondary/25"
>
<div
class=
"w-6/12 rounded-full bg-secondary"
></div>
</div>
<p
class=
"text-right text-xs+ font-medium text-secondary"
>
52%
</p>
</div>
<div
class=
"mt-5 flex flex-wrap -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full border-2 border-white bg-error text-xs+ uppercase text-white dark:border-navy-700"
>
pl
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div
class=
"mt-4 flex items-center justify-between space-x-2"
>
<div
class=
"badge h-5.5 rounded-full bg-secondary px-2 text-xs+ text-white"
>
6 week left
</div>
<div>
<button
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
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"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card shadow-none"
>
<div
class=
"flex flex-1 flex-col justify-between rounded-lg bg-success/15 p-4 dark:bg-transparent sm:p-5"
>
<div>
<div
class=
"flex items-start justify-between"
>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/illustrations/store-ui.svg') }}"
alt=
"image"
/>
<p
class=
"text-xs+"
>
Sep 16, 2021
</p>
</div>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
Store Dashboard
</h3>
<p
class=
"text-xs+"
>
UI/UX Design
</p>
</div>
<div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+ text-slate-700 dark:text-navy-100"
>
Progress
</p>
<div
class=
"progress my-2 h-1.5 bg-success/15 dark:bg-success/25"
>
<div
class=
"w-4/12 rounded-full bg-success"
></div>
</div>
<p
class=
"text-right text-xs+ font-medium text-success"
>
33%
</p>
</div>
<div
class=
"mt-5 flex flex-wrap -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full border-2 border-white bg-success text-xs+ uppercase text-white dark:border-navy-700"
>
rt
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div
class=
"mt-4 flex items-center justify-between space-x-2"
>
<div
class=
"badge h-5.5 rounded-full bg-success px-2 text-xs+ text-white"
>
3 week left
</div>
<div>
<button
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
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"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card shadow-none"
>
<div
class=
"flex flex-1 flex-col justify-between rounded-lg bg-error/15 p-4 dark:bg-transparent sm:p-5"
>
<div>
<div
class=
"flex items-start justify-between"
>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/illustrations/nft.svg') }}"
alt=
"image"
/>
<p
class=
"text-xs+"
>
Jan 03, 2021
</p>
</div>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
NFT Marketplace App
</h3>
<p
class=
"text-xs+"
>
Prototyping
</p>
</div>
<div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+ text-slate-700 dark:text-navy-100"
>
Progress
</p>
<div
class=
"progress my-2 h-1.5 bg-error/15 dark:bg-error/25"
>
<div
class=
"w-6/12 rounded-full bg-error"
></div>
</div>
<p
class=
"text-right text-xs+ font-medium text-error"
>
54%
</p>
</div>
<div
class=
"mt-5 flex flex-wrap -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full border-2 border-white bg-warning text-xs+ uppercase text-white dark:border-navy-700"
>
ew
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div
class=
"mt-4 flex items-center justify-between space-x-2"
>
<div
class=
"badge h-5.5 rounded-full bg-error px-2 text-xs+ text-white"
>
1 week left
</div>
<div>
<button
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
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"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card shadow-none"
>
<div
class=
"flex flex-1 flex-col justify-between rounded-lg bg-primary/15 p-4 dark:bg-transparent sm:p-5"
>
<div>
<div
class=
"flex items-start justify-between"
>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<p
class=
"text-xs+"
>
May 09, 2021
</p>
</div>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
Mobile App
</h3>
<p
class=
"text-xs+"
>
Prototyping
</p>
</div>
<div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+ text-slate-700 dark:text-navy-100"
>
Progress
</p>
<div
class=
"progress my-2 h-1.5 bg-primary/15 dark:bg-accent/25"
>
<div
class=
"w-6/12 rounded-full bg-primary dark:bg-accent"
></div>
</div>
<p
class=
"text-right text-xs+ font-medium text-primary dark:text-accent-light"
>
52%
</p>
</div>
<div
class=
"mt-5 flex flex-wrap -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full border-2 border-white bg-info text-xs+ uppercase text-white dark:border-navy-700"
>
vf
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div
class=
"mt-4 flex items-center justify-between space-x-2"
>
<div
class=
"badge h-5.5 rounded-full bg-primary px-2 text-xs+ text-white dark:bg-accent"
>
3 week left
</div>
<div>
<button
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
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"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card shadow-none"
>
<div
class=
"flex flex-1 flex-col justify-between rounded-lg bg-warning/15 p-4 dark:bg-transparent sm:p-5"
>
<div>
<div
class=
"flex items-start justify-between"
>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/illustrations/lms-ui.svg') }}"
alt=
"image"
/>
<p
class=
"text-xs+"
>
Jan 03, 2021
</p>
</div>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
LMS App Design
</h3>
<p
class=
"text-xs+"
>
UI/UX Design
</p>
</div>
<div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+ text-slate-700 dark:text-navy-100"
>
Progress
</p>
<div
class=
"progress my-2 h-1.5 bg-warning/15 dark:bg-warning/25"
>
<div
class=
"w-9/12 rounded-full bg-warning"
></div>
</div>
<p
class=
"text-right text-xs+ font-medium text-warning"
>
78%
</p>
</div>
<div
class=
"mt-5 flex flex-wrap -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full border-2 border-white bg-info text-xs+ uppercase text-white dark:border-navy-700"
>
po
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div
class=
"mt-4 flex items-center justify-between space-x-2"
>
<div
class=
"badge h-5.5 rounded-full bg-warning px-2 text-xs+ text-white"
>
2 week left
</div>
<div>
<button
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
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"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card shadow-none"
>
<div
class=
"flex flex-1 flex-col justify-between rounded-lg bg-info/15 p-4 dark:bg-transparent sm:p-5"
>
<div>
<div
class=
"flex items-start justify-between"
>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<p
class=
"text-xs+"
>
June 04, 2021
</p>
</div>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
Design Learn Management System
</h3>
<p
class=
"text-xs+"
>
UI/UX Design
</p>
</div>
<div>
<div
class=
"mt-4"
>
<p
class=
"text-xs+ text-slate-700 dark:text-navy-100"
>
Progress
</p>
<div
class=
"progress my-2 h-1.5 bg-info/15 dark:bg-info/25"
>
<div
class=
"w-4/12 rounded-full bg-info"
></div>
</div>
<p
class=
"text-right text-xs+ font-medium text-info"
>
25%
</p>
</div>
<div
class=
"mt-5 flex flex-wrap -space-x-3"
>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<div
class=
"is-initial rounded-full border-2 border-white bg-warning text-xs+ uppercase text-white dark:border-navy-700"
>
ii
</div>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-8 w-8 hover:z-10"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div
class=
"mt-4 flex items-center justify-between space-x-2"
>
<div
class=
"badge h-5.5 rounded-full bg-info px-2 text-xs+ text-white"
>
2 week left
</div>
<div>
<button
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
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"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-teacher.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Teacher Dashboard"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6"
>
<div
class=
"col-span-12 lg:col-span-8 xl:col-span-9"
>
<div
:class=
"$store.breakpoints.smAndUp && 'via-purple-300'"
class=
"card mt-12 bg-gradient-to-l from-pink-300 to-indigo-400 p-5 sm:mt-0 sm:flex-row"
>
<div
class=
"flex justify-center sm:order-last"
>
<img
class=
"-mt-16 h-40 sm:mt-0"
src=
"{{ asset('images/illustrations/teacher.svg') }}"
alt=
""
/>
</div>
<div
class=
"mt-2 flex-1 pt-2 text-center text-white sm:mt-0 sm:text-left"
>
<h3
class=
"text-xl"
>
Welcome Back,
<span
class=
"font-semibold"
>
Caleb
</span>
</h3>
<p
class=
"mt-2 leading-relaxed"
>
Your student completed
<span
class=
"font-semibold text-navy-700"
>
85%
</span>
of tasks
</p>
<p>
Progress is
<span
class=
"font-semibold"
>
excellent!
</span></p>
<button
class=
"btn mt-6 bg-slate-50 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
>
View Lessons
</button>
</div>
</div>
<div
class=
"mt-4 sm:mt-5 lg:mt-6"
>
<div
class=
"flex h-8 items-center justify-between"
>
<h2
class=
"text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Week 2 Classes
</h2>
<a
href=
"#"
class=
"border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70"
>
View
All
</a>
</div>
<div
class=
"mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-5"
>
<div
class=
"card flex-row overflow-hidden"
>
<div
class=
"h-full w-1 bg-gradient-to-b from-blue-500 to-purple-600"
></div>
<div
class=
"flex flex-1 flex-col justify-between p-4 sm:px-5"
>
<div>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
Basic English
</h3>
<p
class=
"text-xs+"
>
Mon. 08:00 - 09:00
</p>
<div
class=
"mt-2 flex space-x-1.5"
>
<a
href=
"#"
class=
"tag bg-primary py-1 px-1.5 text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Language
</a>
</div>
</div>
<div
class=
"mt-10 flex justify-between"
>
<div
class=
"flex -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"card flex-row overflow-hidden"
>
<div
class=
"h-full w-1 bg-gradient-to-b from-info to-info-focus"
></div>
<div
class=
"flex flex-1 flex-col justify-between p-4 sm:px-5"
>
<div>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
Learn UI/UX Design
</h3>
<p
class=
"text-xs+"
>
Tue. 10:00 - 11:30
</p>
<div
class=
"mt-2 flex space-x-1.5"
>
<a
href=
"#"
class=
"tag bg-info py-1 px-1.5 text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
>
UI/UX Design
</a>
</div>
</div>
<div
class=
"mt-10 flex justify-between"
>
<div
class=
"flex -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-warning text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
iu
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"card flex-row overflow-hidden"
>
<div
class=
"h-full w-1 bg-gradient-to-b from-secondary-light to-secondary"
></div>
<div
class=
"flex flex-1 flex-col justify-between p-4 sm:px-5"
>
<div>
<img
class=
"h-12 w-12 rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<h3
class=
"mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100"
>
Basic of digital marketing
</h3>
<p
class=
"text-xs+"
>
Wed. 09:00 - 11:00
</p>
<div
class=
"mt-2 flex space-x-1.5"
>
<a
href=
"#"
class=
"tag bg-secondary px-1.5 py-1 text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
>
Marketing
</a>
</div>
</div>
<div
class=
"mt-10 flex justify-between"
>
<div
class=
"flex -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"mt-4 sm:mt-5 lg:mt-6"
>
<div
class=
"flex items-center justify-between"
>
<h2
class=
"text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Media for lessons
</h2>
<div
class=
"flex"
>
<div
class=
"flex items-center"
x-data=
"{ isInputActive: false }"
>
<label
class=
"block"
>
<input
x-effect=
"isInputActive === true && $nextTick(() => { $el.focus()});"
:class=
"isInputActive ? 'w-32 lg:w-48' : 'w-0'"
class=
"form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200"
placeholder=
"Search here..."
type=
"text"
/>
</label>
<button
@
click=
"isInputActive = !isInputActive"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card mt-3"
>
<div
class=
"is-scrollbar-hidden min-w-full overflow-x-auto"
>
<table
class=
"is-hoverable w-full text-left"
>
<thead>
<tr>
<th
class=
"whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
COURSE NAME
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
FILE NAME
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
PERMISSION
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
ASSIGN
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
SIZE
</th>
<th
class=
"whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
</th>
</tr>
</thead>
<tbody>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 dark:bg-accent"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5.5 w-5.5 text-primary dark:text-white"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Basic
English
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<a
href=
"#"
class=
"hover:underline focus:underline"
>
English book.pdf
</a>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-slate-800 dark:text-navy-100"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Only View
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
13 Members
</td>
<td
class=
"whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
56 MB
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 dark:bg-accent"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5.5 w-5.5 text-primary dark:text-white"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Grammar and
Punctuation
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<a
href=
"#"
class=
"hover:underline focus:underline"
>
Is Correct.docx
</a>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-secondary dark:text-secondary-light"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Can Edit
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
95 Members
</td>
<td
class=
"whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
4.2 MB
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-secondary/10 dark:bg-secondary"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5.5 w-5.5 text-secondary dark:text-white"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
/>
</svg>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Practice
speaking English
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<a
href=
"#"
class=
"hover:underline focus:underline"
>
Speaking.mp3
</a>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-slate-800 dark:text-navy-100"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Only View
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
49 Members
</td>
<td
class=
"whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
9 MB
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-info/10 dark:bg-info"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5.5 w-5.5 text-info dark:text-white"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
/>
</svg>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Basic
English
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<a
href=
"#"
class=
"hover:underline focus:underline"
>
English books.zip
</a>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-slate-800 dark:text-navy-100"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Only View
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
63 Members
</td>
<td
class=
"whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
496 MB
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-warning/10 dark:bg-warning"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5.5 w-5.5 text-warning dark:text-white"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Grammar and
Punctuation
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<a
href=
"#"
class=
"hover:underline focus:underline"
>
Video Course.mp4
</a>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-slate-800 dark:text-navy-100"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Only View
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
47 Members
</td>
<td
class=
"whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
245 MB
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
<tr
class=
"border-y border-transparent"
>
<td
class=
"whitespace-nowrap rounded-bl-lg px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 dark:bg-accent"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5.5 w-5.5 text-primary dark:text-white"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Basic of
digital marketing
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<a
href=
"#"
class=
"hover:underline focus:underline"
>
Digital
marketing.pdf
</a>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"badge space-x-2.5 text-slate-800 dark:text-navy-100"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Only View
</span>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
42 Members
</td>
<td
class=
"whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
54 MB
</td>
<td
class=
"whitespace-nowrap rounded-br-lg px-4 py-3 sm:px-5"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div
class=
"col-span-12 lg:col-span-4 xl:col-span-3"
>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-1 lg:gap-6"
>
<div
class=
"card pb-5"
>
<div
class=
"mt-3 flex items-center justify-between px-4"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Working Hours
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.workingHours);
$el._x_chart.render()
});"
></div>
</div>
<div
class=
"px-4 text-center text-xs+ sm:px-5"
>
<p>
Working hours calculated based on your activity
</p>
</div>
</div>
<div
class=
"card p-4 lg:order-last"
>
<div
class=
"space-y-1 text-center font-inter text-xs+"
>
<div
class=
"flex items-center justify-between px-2 pb-4"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
January 2022
</p>
<div
class=
"flex space-x-2"
>
<button
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M15 19l-7-7 7-7"
/>
</svg>
</button>
<button
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M9 5l7 7-7 7"
/>
</svg>
</button>
</div>
</div>
<div
class=
"grid grid-cols-7 pb-2"
>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
SUN
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
MON
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
TUE
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
WED
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
THU
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
FRY
</div>
<div
class=
"text-tiny+ font-semibold text-primary dark:text-accent-light"
>
SAT
</div>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
29
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
30
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
31
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
1
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
2
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
3
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
4
</button>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
5
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
6
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
7
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
8
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
9
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
10
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
11
</button>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
12
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
13
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl font-medium text-primary hover:bg-primary/10 hover:text-primary dark:text-accent-light dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
14
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
15
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
16
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
17
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
18
</button>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
19
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
20
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
21
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
22
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
23
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
24
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
25
</button>
</div>
<div
class=
"grid grid-cols-7 place-items-center"
>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
26
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
27
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
28
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
29
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
30
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
1
</button>
<button
class=
"flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light"
>
2
</button>
</div>
</div>
</div>
<div
class=
"sm:col-span-2 lg:col-span-1"
>
<div
class=
"flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Students
</h2>
<a
href=
"#"
class=
"border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70"
>
View
All
</a>
</div>
<div
class=
"mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-x-5 lg:grid-cols-1"
>
<div
class=
"card p-3"
>
<div
class=
"flex items-center justify-between space-x-2"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
<div
class=
"absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
>
</div>
</div>
<div>
<p
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Travis Fuller
</p>
<p
class=
"mt-0.5 text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
65% completed
</p>
</div>
</div>
<div
class=
"relative cursor-pointer"
>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<div
class=
"absolute top-0 right-0 -m-1 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-tiny font-medium leading-none text-white dark:bg-accent"
>
2
</div>
</div>
</div>
</div>
<div
class=
"card p-3"
>
<div
class=
"flex items-center justify-between space-x-2"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Konnor Guzman
</p>
<p
class=
"mt-0.5 text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
78% completed
</p>
</div>
</div>
<div
class=
"relative cursor-pointer"
>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"card p-3"
>
<div
class=
"flex items-center justify-between space-x-2"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Alfredo Elliott
</p>
<p
class=
"mt-0.5 text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
58% completed
</p>
</div>
</div>
<div
class=
"relative cursor-pointer"
>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<div
class=
"absolute top-0 right-0 -m-1 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-tiny font-medium leading-none text-white dark:bg-accent"
>
3
</div>
</div>
</div>
</div>
<div
class=
"card p-3"
>
<div
class=
"flex items-center justify-between space-x-2"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
<div
class=
"absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent"
>
</div>
</div>
<div>
<p
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Derrick Simmons
</p>
<p
class=
"mt-0.5 text-xs text-slate-400 line-clamp-1 dark:text-navy-300"
>
65% completed
</p>
</div>
</div>
<div
class=
"relative cursor-pointer"
>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-travel.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Travel Dashboard"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full pb-8"
>
<div
class=
"mt-4 grid grid-cols-12 gap-4 px-[var(--margin-x)] transition-all duration-[.25s] sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6"
>
<div
class=
"card col-span-12 lg:col-span-8 xl:col-span-9"
>
<div
class=
"mt-3 flex items-center justify-between px-4 sm:px-5"
>
<h2
class=
"text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Travels History
</h2>
<div
class=
"flex"
>
<div
class=
"flex items-center"
x-data=
"{ isInputActive: false }"
>
<label
class=
"block"
>
<input
x-effect=
"isInputActive === true && $nextTick(() => { $el.focus()});"
:class=
"isInputActive ? 'w-32 lg:w-48' : 'w-0'"
class=
"form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200"
placeholder=
"Search here..."
type=
"text"
/>
</label>
<button
@
click=
"isInputActive = !isInputActive"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class=
"mt-5 grid grid-cols-1 gap-4 px-4 sm:grid-cols-3 sm:px-5"
>
<div
class=
"relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-info to-info-focus p-3.5"
>
<p
class=
"text-xs uppercase text-sky-100"
>
Total Booking
</p>
<div
class=
"flex items-end justify-between space-x-2"
>
<p
class=
"mt-4 text-2xl font-medium text-white"
>
31,556
</p>
<a
href=
"#"
class=
"border-b border-dotted border-current pb-0.5 text-xs font-medium text-sky-100 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white"
>
Get
Report
</a>
</div>
<div
class=
"mask is-reuleaux-triangle absolute top-0 right-0 -m-3 h-16 w-16 bg-white/20"
></div>
</div>
<div
class=
"relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-amber-400 to-orange-600 p-3.5"
>
<p
class=
"text-xs uppercase text-amber-50"
>
Total Revenue
</p>
<div
class=
"flex items-end justify-between space-x-2"
>
<p
class=
"mt-4 text-2xl font-medium text-white"
>
$61,556
</p>
<a
href=
"#"
class=
"border-b border-dotted border-current pb-0.5 text-xs font-medium text-amber-50 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white"
>
Get
Report
</a>
</div>
<div
class=
"mask is-diamond absolute top-0 right-0 -m-3 h-16 w-16 bg-white/20"
></div>
</div>
<div
class=
"relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-pink-500 to-rose-500 p-3.5"
>
<p
class=
"text-xs uppercase text-pink-100"
>
Total Debt
</p>
<div
class=
"flex items-end justify-between space-x-2"
>
<p
class=
"mt-4 text-2xl font-medium text-white"
>
$12,556
</p>
<a
href=
"#"
class=
"border-b border-dotted border-current pb-0.5 text-xs font-medium text-pink-100 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white"
>
Get
Report
</a>
</div>
<div
class=
"mask is-hexagon-2 absolute top-0 right-0 -m-3 h-16 w-16 bg-white/20"
></div>
</div>
</div>
<div
class=
"scrollbar-sm mt-5 min-w-full overflow-x-auto"
>
<table
class=
"is-hoverable w-full text-left"
>
<tbody>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-12 w-12"
>
<img
class=
"h-full w-full rounded-lg"
src=
"{{ asset('images/800x800.png') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
Glacier National Park
</p>
<p
class=
"mt-1 text-xs text-slate-400 dark:text-navy-300"
>
Unated States
</p>
</div>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
5 Night
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-departure"
></i>
 
<span>
05 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-arrival"
></i>
 
<span>
12 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
2 Adult
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
$120
</p>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-12 w-12"
>
<img
class=
"h-full w-full rounded-lg"
src=
"{{ asset('images/800x800.png') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
Tahiti
</p>
<p
class=
"mt-1 text-xs text-slate-400 dark:text-navy-300"
>
French
</p>
</div>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
4 Night
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-departure"
></i>
 
<span>
08 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-arrival"
></i>
 
<span>
14 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
3 Adult
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
$140
</p>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-12 w-12"
>
<img
class=
"h-full w-full rounded-lg"
src=
"{{ asset('images/800x800.png') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
Argentine Patagonia
</p>
<p
class=
"mt-1 text-xs text-slate-400 dark:text-navy-300"
>
Argentine
</p>
</div>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
12 Night
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-departure"
></i>
 
<span>
11 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-arrival"
></i>
 
<span>
23 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
6 Adult
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
$300
</p>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-12 w-12"
>
<img
class=
"h-full w-full rounded-lg"
src=
"{{ asset('images/800x800.png') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
Amalfi Coast
</p>
<p
class=
"mt-1 text-xs text-slate-400 dark:text-navy-300"
>
Italy
</p>
</div>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
2 Night
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-departure"
></i>
 
<span>
10 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-arrival"
></i>
 
<span>
12 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
1 Adult
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
$80
</p>
</td>
</tr>
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-12 w-12"
>
<img
class=
"h-full w-full rounded-lg"
src=
"{{ asset('images/800x800.png') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"font-medium text-slate-600 dark:text-navy-100"
>
Great Barrier Reef
</p>
<p
class=
"mt-1 text-xs text-slate-400 dark:text-navy-300"
>
Australia
</p>
</div>
</div>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
4 Night
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-departure"
></i>
 
<span>
01 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<i
class=
"fa-solid fa-plane-arrival"
></i>
 
<span>
05 Dec 2018
</span>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
3 Adult
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
$100
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div
class=
"flex flex-col justify-between space-y-4 px-4 py-4 sm:flex-row sm:items-center sm:space-y-0 sm:px-5"
>
<div
class=
"text-xs+"
>
1 - 10 of 10 entries
</div>
<ol
class=
"pagination"
>
<li
class=
"rounded-l-full bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 19l-7-7 7-7"
/>
</svg>
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
1
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
2
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
3
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
4
</a>
</li>
<li
class=
"bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
5
</a>
</li>
<li
class=
"rounded-r-full bg-slate-150 dark:bg-navy-500"
>
<a
href=
"#"
class=
"flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</a>
</li>
</ol>
</div>
</div>
<div
class=
"col-span-12 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:col-span-4 lg:grid-cols-1 lg:gap-6 xl:col-span-3"
>
<div
class=
"card pb-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Analytics
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.travelAnalytics);
$el._x_chart.render()
});"
></div>
</div>
<div
class=
"mx-auto mt-3 max-w-xs px-4 text-center text-xs+ sm:px-5"
>
<p>
Travel analytics calculated based on travels count
</p>
</div>
</div>
<div
class=
"card"
>
<div
class=
"mt-3 flex items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Expense
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-2 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p
class=
"grow px-4 text-xl font-semibold text-slate-700 dark:text-navy-100 sm:px-5"
>
$34.6k
</p>
<div
class=
"ax-transparent-gridline"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.travelExpense);
$el._x_chart.render()
});"
></div>
</div>
</div>
</div>
</div>
<div
class=
"mt-4 pl-[var(--margin-x)] transition-all duration-[.25s] sm:mt-5 lg:mt-6"
>
<div
class=
"rounded-l-lg bg-slate-150 pt-4 pb-1 dark:bg-navy-800"
>
<h2
class=
"px-4 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 sm:px-5 lg:text-lg"
>
Top Hotels
</h2>
<div
class=
"scrollbar-sm mt-4 flex space-x-4 overflow-x-auto px-4 pb-4 sm:px-5"
>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-info py-1 uppercase text-white"
>
plus
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
3 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
3 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Emerald
Bay Inn.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$100
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.9
</span>
</p>
</div>
</div>
</div>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-warning py-1 uppercase text-white"
>
lux
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
2 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
5 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Crowne
Plaza.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$80
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.8
</span>
</p>
</div>
</div>
</div>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-secondary py-1 uppercase text-white"
>
Penthouse
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
3 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
3 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Sunset
Lodge.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$100
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.9
</span>
</p>
</div>
</div>
</div>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-info py-1 uppercase text-white"
>
plus
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
1 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
2 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Hotel
Elite.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$120
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.9
</span>
</p>
</div>
</div>
</div>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-warning py-1 uppercase text-white"
>
lux
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
2 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
5 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Hotel
Bliss.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$90
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.5
</span>
</p>
</div>
</div>
</div>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-info py-1 uppercase text-white"
>
plus
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
3 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
3 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Emerald
Bay Inn.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$100
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.9
</span>
</p>
</div>
</div>
</div>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-warning py-1 uppercase text-white"
>
lux
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
2 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
5 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Crowne
Plaza.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$80
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.8
</span>
</p>
</div>
</div>
</div>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-secondary py-1 uppercase text-white"
>
Penthouse
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
3 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
3 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Sunset
Lodge.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$100
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.9
</span>
</p>
</div>
</div>
</div>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-info py-1 uppercase text-white"
>
plus
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
1 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
2 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Hotel
Elite.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$120
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.9
</span>
</p>
</div>
</div>
</div>
<div
class=
"flex w-72 shrink-0 flex-col"
>
<img
class=
"h-48 w-full rounded-2xl object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"card mx-2 -mt-8 grow rounded-2xl p-3.5"
>
<div
class=
"flex space-x-2"
>
<div
class=
"badge rounded-full bg-warning py-1 uppercase text-white"
>
lux
</div>
<div
class=
"flex flex-wrap items-center font-inter text-xs uppercase"
>
<p>
2 beds
</p>
<div
class=
"mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"
></div>
<p>
5 Adult
</p>
</div>
</div>
<div
class=
"mt-2"
>
<a
href=
"#"
class=
"text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light"
>
Hotel
Bliss.
</a>
</div>
<div
class=
"flex items-end justify-between"
>
<p
class=
"mt-2"
>
<span
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
$90
</span>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
/day
</span>
</p>
<p
class=
"flex shrink-0 items-center space-x-1"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"currentColor"
class=
"h-3.5 w-3.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z"
/>
</svg>
<span>
4.5
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-widget-contacts.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Widget Contact"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"flex items-center space-x-4 py-5 lg:py-6"
>
<h2
class=
"text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Contact Widgets
</h2>
<div
class=
"hidden h-full py-1 sm:flex"
>
<div
class=
"h-full w-px bg-slate-300 dark:bg-navy-600"
></div>
</div>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"#"
>
Dashboards
</a>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li>
Contact Widgets
</li>
</ul>
</div>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4"
>
<div
class=
"space-y-4 sm:space-y-5 lg:space-y-6"
>
<div
class=
"card items-center p-4 sm:p-5 lg:p-7"
>
<div
class=
"avatar h-16 w-16"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<h3
class=
"mt-3 text-base font-medium text-slate-700 dark:text-navy-100"
>
Konnor Guzman
</h3>
<p
class=
"text-slate-400 dark:text-navy-300"
>
is calling
</p>
<div
class=
"mt-6 flex space-x-6"
>
<button
class=
"btn h-9 w-9 rounded-full bg-success p-0 font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
>
<i
class=
"fa-solid fa-phone"
></i>
</button>
<button
class=
"btn h-9 w-9 rounded-full bg-error p-0 font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
<i
class=
"fa-solid fa-phone rotate-[135deg]"
></i>
</button>
</div>
</div>
<div
class=
"card items-center p-4 sm:p-5 lg:p-7"
>
<div
class=
"avatar h-16 w-16"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<h3
class=
"mt-3 text-base font-medium text-slate-700 dark:text-navy-100"
>
Travis Fuller
</h3>
<p
class=
"text-slate-400 dark:text-navy-300"
>
00:01
</p>
<div
class=
"mt-6 grid grid-cols-3 gap-4"
>
<button
class=
"btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
class=
"fa-regular fa-user text-base"
></i>
</button>
<button
class=
"btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
class=
"fa-solid fa-microphone-lines-slash"
></i>
</button>
<button
class=
"btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
class=
"fa-solid fa-voicemail"
></i>
</button>
<button
class=
"btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
class=
"fa-solid fa-volume-high"
></i>
</button>
<button
class=
"btn h-9 w-9 rounded-full bg-error p-0 font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
<i
class=
"fa-solid fa-phone rotate-[135deg]"
></i>
</button>
<button
class=
"btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
>
<path
fill=
"currentColor"
d=
"M5.045 21c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143S3 17.674 3 18.857C3 20.041 3.916 21 5.045 21zM12 14.143c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143s-2.045.96-2.045 2.143c0 1.184.915 2.143 2.045 2.143zM12 7.286c1.13 0 2.046-.96 2.046-2.143C14.046 3.959 13.13 3 12 3s-2.045.96-2.045 2.143c0 1.183.915 2.143 2.045 2.143zM5.046 7.286c1.13 0 2.045-.96 2.045-2.143C7.091 3.959 6.176 3 5.046 3S3 3.96 3 5.143c0 1.183.916 2.143 2.046 2.143zM5.045 14.143c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143S3 10.817 3 12c0 1.184.916 2.143 2.045 2.143zM12 21c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143s-2.045.96-2.045 2.143C9.955 20.041 10.87 21 12 21zM18.954 21c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143s-2.045.96-2.045 2.143c0 1.184.916 2.143 2.045 2.143zM18.954 7.286c1.13 0 2.046-.96 2.046-2.143C21 3.959 20.084 3 18.954 3s-2.045.96-2.045 2.143c0 1.183.916 2.143 2.045 2.143zM18.954 14.143c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143s-2.045.96-2.045 2.143c0 1.184.916 2.143 2.045 2.143z"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Contact List
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<label
class=
"relative flex"
>
<input
class=
"form-input peer h-9 w-full rounded-full border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"112 Contacts"
type=
"text"
/>
<span
class=
"pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5 transition-colors duration-200"
fill=
"currentColor"
viewBox=
"0 0 24 24"
>
<path
d=
"M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"
/>
</svg>
</span>
</label>
<div
class=
"mt-4 space-y-3.5"
x-data=
"{ expandedItem: 'item-1' }"
>
<div
x-data=
"accordionItem('item-1')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Konnor Guzman
</h3>
<p
class=
"mt-1 text-xs line-clamp-1"
>
(01) 22 888 4444
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-2')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Alfredo Elliott
</h3>
<p
class=
"mt-1 text-xs line-clamp-1"
>
(095)-800-8313
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-3')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<div
class=
"is-initial rounded-full bg-info text-sm+ uppercase text-white"
>
ds
</div>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Derrick Simmons
</h3>
<p
class=
"mt-1 text-xs line-clamp-1"
>
(350)-813-3861
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-4')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Henry Curtis
</h3>
<p
class=
"mt-1 text-xs line-clamp-1"
>
(675)-975-0083
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-5')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
John Doe
</h3>
<p
class=
"mt-1 text-xs line-clamp-1"
>
(727)-810-3880
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-6')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Travis Fuller
</h3>
<p
class=
"mt-1 text-xs line-clamp-1"
>
(654)-245-9324
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
<div
x-data=
"accordionItem('item-7')"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Raul Bradley
</h3>
<p
class=
"mt-1 text-xs line-clamp-1"
>
(350)-813-3861
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down transition-transform"
></i>
</button>
</div>
<div
x-show=
"expanded"
x-collapse
>
<div
class=
"flex justify-between pt-4"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<i
class=
"fa-solid fa-video text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
>
<i
class=
"fa-regular fa-comment text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-ellipsis"
></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Contact Info
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"avatar h-16 w-16"
>
<img
class=
"mask is-squircle"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<h3
class=
"mt-2 text-base font-medium text-slate-700 dark:text-navy-100"
>
Travis Fuller
</h3>
<p
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Family
</p>
<div
class=
"my-3 h-px bg-slate-200 dark:bg-navy-500"
></div>
<div
class=
"space-y-3.5"
>
<div
class=
"flex items-center justify-between"
>
<p
class=
"line-clamp-1"
>
(01) 22 888 4444
</p>
<div
class=
"flex space-x-1.5"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<p
class=
"line-clamp-1"
>
(727)-810-3880
</p>
<div
class=
"flex space-x-1.5"
>
<button
class=
"btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
<i
class=
"fa-solid fa-phone text-xs"
></i>
</button>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<p
class=
"line-clamp-1"
>
raul@example.com
</p>
<div
class=
"flex space-x-1.5"
>
<button
class=
"btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa-regular fa-envelope text-xs"
></i>
</button>
</div>
</div>
</div>
<div
class=
"my-3 h-px bg-slate-200 dark:bg-navy-500"
></div>
<div
class=
"space-y-3.5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p>
12 Sep. 20:30
</p>
<p
class=
"text-xs"
>
incoming call
</p>
</div>
<div>
<div
class=
"badge rounded-full bg-error/10 text-error dark:bg-error/15"
>
Missed
</div>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div>
<p>
13 Sep. 21:45
</p>
<p
class=
"text-xs"
>
incoming call
</p>
</div>
<div>
<div
class=
"badge rounded-full bg-info/10 text-info dark:bg-info/15"
>
1m 33s
</div>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div>
<p>
04 Oct. 12:14
</p>
<p
class=
"text-xs"
>
incoming call
</p>
</div>
<div>
<div
class=
"badge rounded-full bg-info/10 text-info dark:bg-info/15"
>
45s
</div>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div>
<p>
21 Oct. 14:42
</p>
<p
class=
"text-xs"
>
incoming call
</p>
</div>
<div>
<div
class=
"badge rounded-full bg-info/10 text-info dark:bg-info/15"
>
6m 14s
</div>
</div>
</div>
</div>
</div>
<div
class=
"space-y-4 sm:space-y-5 lg:space-y-6"
>
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Call Setting
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div
class=
"mt-4 space-y-3.5"
>
<label
class=
"flex items-center justify-between space-x-2"
>
<span
class=
"font-medium"
>
Voice chat
</span>
<input
checked
class=
"form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:!border-success checked:before:!bg-success dark:border-navy-400 dark:before:bg-navy-300"
type=
"checkbox"
/>
</label>
<label
class=
"flex items-center justify-between space-x-2"
>
<span
class=
"font-medium"
>
Video chat
</span>
<input
checked
class=
"form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
type=
"checkbox"
/>
</label>
<label
class=
"flex items-center justify-between space-x-2"
>
<span
class=
"font-medium"
>
Realtime chat
</span>
<input
checked
class=
"form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-secondary checked:before:bg-secondary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-secondary-light dark:checked:before:bg-secondary-light"
type=
"checkbox"
/>
</label>
<label
class=
"flex items-center justify-between space-x-2"
>
<span
class=
"font-medium"
>
Incoming calls
</span>
<input
checked
class=
"form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:!border-warning checked:before:!bg-warning dark:border-navy-400 dark:before:bg-navy-300"
type=
"checkbox"
/>
</label>
</div>
<button
class=
"btn mt-6 space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<i
class=
"fa-regular fa-check-circle"
></i>
<span>
Apply Changes
</span>
</button>
</div>
<div
class=
"card p-4 sm:p-5"
>
<div
class=
"flex space-x-4"
>
<div>
<div
class=
"flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light"
>
<i
class=
"fa-solid fa-phone"
></i>
</div>
</div>
<div
class=
"space-y-2"
>
<p
class=
"text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
WebRTC Module
</p>
<p>
Lorem ipsum dolor sit amet, consectetur
</p>
</div>
</div>
<div
class=
"mt-6 flex items-center justify-between"
>
<div
class=
"space-x-1.5"
>
<button
class=
"btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<i
class=
"fa-solid fa-info"
></i>
</button>
<button
class=
"btn h-8 w-8 rounded-full bg-error p-0 font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
<i
class=
"fa-regular fa-trash-alt"
></i>
</button>
</div>
<input
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-widget-ui.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Widget UI"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"flex items-center space-x-4 py-5 lg:py-6"
>
<h2
class=
"text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Widget UI
</h2>
<div
class=
"hidden h-full py-1 sm:flex"
>
<div
class=
"h-full w-px bg-slate-300 dark:bg-navy-600"
></div>
</div>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"#"
>
Dashboards
</a>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li>
Widget UI
</li>
</ul>
</div>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4"
>
<div
class=
"space-y-4 sm:space-y-5 lg:space-y-6"
>
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Labels
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"inline-space flex flex-wrap"
>
<a
href=
"#"
class=
"tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Icon
</a>
<a
href=
"#"
class=
"tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
UI/UX
</a>
<a
href=
"#"
class=
"tag bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Bootstrap
</a>
<a
href=
"#"
class=
"tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Tailwind
</a>
<a
href=
"#"
class=
"tag bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
React
</a>
<a
href=
"#"
class=
"tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Alpine
</a>
<a
href=
"#"
class=
"tag bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Design
</a>
</div>
</div>
<div
class=
"card p-3"
>
<img
class=
"h-48 rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"mt-3"
>
<p
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
❤ Instagram Post
</p>
<p
class=
"mt-1 text-xs+"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit?
</p>
<div
class=
"mt-2 text-xs"
>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#PHP
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#ReactJS
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#NextJS
</a>
</div>
</div>
</div>
<div
class=
"card p-4"
>
<div
class=
"flex items-center justify-between"
>
<a
href=
"#"
class=
"font-inter font-medium tracking-wide transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
>
@twitteraccount
</a>
<i
class=
"fa-brands fa-twitter"
></i>
</div>
<p
class=
"mt-3 text-xs+"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Doloremque eaque iste libero neque.
</p>
<div
class=
"mt-2 text-xs"
>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#PHP
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#ReactJS
</a>
<a
href=
"#"
class=
"text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
#NextJS
</a>
</div>
</div>
<div
class=
"card p-4"
>
<div
class=
"flex -space-x-px"
>
<input
class=
"form-input h-10 w-full rounded-l-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"Search here..."
type=
"text"
/>
<button
class=
"btn z-2 h-10 w-10 shrink-0 rounded-l-none bg-primary p-0 font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</div>
<div
class=
"mt-3 text-center"
>
<a
href=
"#"
class=
"tag rounded-full bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
Apps
</a>
<a
href=
"#"
class=
"tag rounded-full bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
Repair
</a>
<a
href=
"#"
class=
"tag rounded-full bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
Billing
</a>
</div>
</div>
<div
class=
"card flex-row justify-between"
>
<div
class=
"p-4"
>
<div
class=
"flex space-x-4"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div>
<h3
class=
"font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Konnor Guzman
</h3>
<p
class=
"text-xs line-clamp-1"
>
Web Developer
</p>
</div>
</div>
<p
class=
"mt-2 text-xs+"
>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
<div
class=
"my-3 mr-2 flex flex-col space-y-1"
>
<button
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
</button>
<button
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</button>
<button
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class=
"space-y-4 sm:space-y-5 lg:space-y-6"
>
<div
class=
"card p-3"
>
<div
class=
"grid grid-cols-3 gap-3"
>
<img
src=
"{{ asset('images/800x600.png') }}"
class=
"rounded-lg object-cover object-center"
alt=
"image"
/>
<img
src=
"{{ asset('images/800x600.png') }}"
class=
"rounded-lg object-cover object-center"
alt=
"image"
/>
<img
src=
"{{ asset('images/800x600.png') }}"
class=
"rounded-lg object-cover object-center"
alt=
"image"
/>
<img
src=
"{{ asset('images/800x600.png') }}"
class=
"rounded-lg object-cover object-center"
alt=
"image"
/>
<img
src=
"{{ asset('images/800x600.png') }}"
class=
"rounded-lg object-cover object-center"
alt=
"image"
/>
<img
src=
"{{ asset('images/800x600.png') }}"
class=
"rounded-lg object-cover object-center"
alt=
"image"
/>
</div>
</div>
<div
class=
"card flex-row space-x-4 p-3"
>
<div
class=
"w-12 shrink-0"
>
<img
class=
"w-full"
src=
"{{ asset('images/illustrations/creativedesign-char.svg') }}"
alt=
"image"
/>
</div>
<div>
<p
class=
"text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Design Updated
</p>
<p
class=
"mt-2 text-xs+"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div
class=
"mt-3 flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
</div>
</div>
<div
class=
"flex space-x-4 sm:space-x-5 lg:space-x-6"
>
<div
class=
"card flex-1 p-4"
>
<div
class=
"flex grow flex-col items-center"
>
<div
class=
"flex h-16 w-12 items-center justify-center rounded-full bg-info"
>
<i
class=
"fa-solid fa-person-walking text-2xl text-white"
></i>
</div>
<p
class=
"mt-2 font-medium"
>
Walking
</p>
</div>
<div
class=
"mt-3 text-center"
>
<p
class=
"text-3xl font-semibold text-slate-600 dark:text-navy-100"
>
234
</p>
<p
class=
"text-xs+"
>
meter
</p>
</div>
</div>
<div
class=
"card flex-1 p-4"
>
<div
class=
"flex grow flex-col items-center"
>
<div
class=
"flex h-16 w-12 items-center justify-center rounded-full bg-warning"
>
<i
class=
"fa-solid fa-clock-rotate-left text-xl text-white"
></i>
</div>
<p
class=
"mt-2 font-medium"
>
Time
</p>
</div>
<div
class=
"mt-3 text-center"
>
<p
class=
"text-3xl font-semibold text-slate-600 dark:text-navy-100"
>
16
</p>
<p
class=
"text-xs+"
>
minutes
</p>
</div>
</div>
</div>
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Maybe You Know
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"grid grid-cols-2 gap-3"
>
<div
class=
"relative flex flex-col items-center justify-center rounded-lg border border-slate-200 p-4 dark:border-navy-500"
>
<div
class=
"absolute top-0 right-0 mx-2 my-1"
>
<button
class=
"text-slate-400 transition-colors hover:text-slate-800 focus:text-slate-800 dark:text-navy-300 dark:hover:text-navy-100 dark:focus:text-navy-100"
>
<i
class=
"fa-solid fa-xmark"
></i>
</button>
</div>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"mask is-hexagon"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
John D.
</p>
<button
class=
"btn mt-3 h-6 rounded-full bg-slate-150 px-3 text-xs font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Follow
</button>
</div>
<div
class=
"relative flex flex-col items-center justify-center rounded-lg border border-slate-200 p-4 dark:border-navy-500"
>
<div
class=
"absolute top-0 right-0 mx-2 my-1"
>
<button
class=
"text-slate-400 transition-colors hover:text-slate-800 focus:text-slate-800 dark:text-navy-300 dark:hover:text-navy-100 dark:focus:text-navy-100"
>
<i
class=
"fa-solid fa-xmark"
></i>
</button>
</div>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"mask is-hexagon"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Travis F.
</p>
<button
class=
"btn mt-3 h-6 rounded-full bg-slate-150 px-3 text-xs font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Follow
</button>
</div>
<div
class=
"relative flex flex-col items-center justify-center rounded-lg border border-slate-200 p-4 dark:border-navy-500"
>
<div
class=
"absolute top-0 right-0 mx-2 my-1"
>
<button
class=
"text-slate-400 transition-colors hover:text-slate-800 focus:text-slate-800 dark:text-navy-300 dark:hover:text-navy-100 dark:focus:text-navy-100"
>
<i
class=
"fa-solid fa-xmark"
></i>
</button>
</div>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"mask is-hexagon"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Alfredo E.
</p>
<button
class=
"btn mt-3 h-6 rounded-full bg-slate-150 px-3 text-xs font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Follow
</button>
</div>
<div
class=
"relative flex flex-col items-center justify-center rounded-lg border border-slate-200 p-4 dark:border-navy-500"
>
<div
class=
"absolute top-0 right-0 mx-2 my-1"
>
<button
class=
"text-slate-400 transition-colors hover:text-slate-800 focus:text-slate-800 dark:text-navy-300 dark:hover:text-navy-100 dark:focus:text-navy-100"
>
<i
class=
"fa-solid fa-xmark"
></i>
</button>
</div>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"mask is-hexagon"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Raul B.
</p>
<button
class=
"btn mt-3 h-6 rounded-full bg-slate-150 px-3 text-xs font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Follow
</button>
</div>
</div>
</div>
<div
class=
"card flex-row items-center space-x-4 p-4"
>
<div
class=
"flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-10 w-10 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-10 w-10 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div>
<p
class=
"text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Happy Birthday
</p>
<div
class=
"flex text-xs+"
>
<a
href=
"#"
class=
"text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Konnor
</a>
<div
class=
"mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"
></div>
<a
href=
"#"
class=
"text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
John
</a>
</div>
</div>
</div>
</div>
<div
class=
"space-y-4 sm:space-y-5 lg:space-y-6"
>
<div
class=
"card p-4 sm:p-5"
>
<div
class=
"flex items-center justify-between"
>
<p
class=
"text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Share
</p>
<button
class=
"btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
class=
"fa-solid fa-arrow-up-right-from-square"
></i>
</button>
</div>
<div
class=
"mt-4 grid grid-cols-4 gap-3"
>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
John
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Doe
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Raul
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Alfredo
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Travis
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Curtis
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Konnor
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Guzman
</p>
</div>
</div>
</div>
<div
class=
"card space-y-4 p-4 sm:p-5"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-5 w-5 rounded border-2 bg-transparent dark:border-navy-400"
></div>
<p>
Not Color
</p>
</div>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-5 w-5 rounded border-2 border-primary bg-transparent dark:border-accent"
></div>
<p>
Primary Color
</p>
</div>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-5 w-5 rounded border-2 border-secondary bg-transparent dark:border-secondary-light"
>
</div>
<p>
Secondary Color
</p>
</div>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-5 w-5 rounded border-2 border-info bg-transparent"
></div>
<p>
Info Color
</p>
</div>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-5 w-5 rounded border-2 border-success bg-transparent"
></div>
<p>
Success Color
</p>
</div>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-5 w-5 rounded border-2 border-warning bg-transparent"
></div>
<p>
Warning Color
</p>
</div>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"h-5 w-5 rounded border-2 border-error bg-transparent"
></div>
<p>
Error Color
</p>
</div>
</div>
<div
class=
"card px-4 pb-5 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Statistic
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"space-y-4"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"mask is-squircle flex h-10 w-10 items-center justify-center bg-warning/10"
>
<i
class=
"fa-solid fa-history text-xl text-warning"
></i>
</div>
<div
class=
"grow space-y-1"
>
<div
class=
"flex justify-between"
>
<p
class=
"font-medium"
>
Pending
</p>
<p
class=
"text-warning"
>
50%
</p>
</div>
<div
class=
"progress h-1.5 bg-slate-150 dark:bg-navy-500"
>
<div
class=
"w-6/12 rounded-full bg-warning"
></div>
</div>
</div>
</div>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10 dark:bg-accent-light/10"
>
<i
class=
"fa-solid fa-spinner text-xl text-primary dark:text-accent-light"
></i>
</div>
<div
class=
"grow space-y-1"
>
<div
class=
"flex justify-between"
>
<p
class=
"font-medium"
>
In Progress
</p>
<p
class=
"text-primary dark:text-accent-light"
>
75%
</p>
</div>
<div
class=
"progress h-1.5 bg-slate-150 dark:bg-navy-500"
>
<div
class=
"w-9/12 rounded-full bg-primary dark:bg-accent"
></div>
</div>
</div>
</div>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"mask is-squircle flex h-10 w-10 items-center justify-center bg-success/10"
>
<i
class=
"fa-regular fa-circle-check text-xl text-success"
></i>
</div>
<div
class=
"grow space-y-1"
>
<div
class=
"flex justify-between"
>
<p
class=
"font-medium"
>
Completed
</p>
<p
class=
"text-success"
>
25%
</p>
</div>
<div
class=
"progress h-1.5 bg-slate-150 dark:bg-navy-500"
>
<div
class=
"w-3/12 rounded-full bg-success"
></div>
</div>
</div>
</div>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"mask is-squircle flex h-10 w-10 items-center justify-center bg-error/10"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-6 w-6 text-error"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div
class=
"grow space-y-1"
>
<div
class=
"flex justify-between"
>
<p
class=
"font-medium"
>
Cancelled
</p>
<p
class=
"text-error"
>
25%
</p>
</div>
<div
class=
"progress h-1.5 bg-slate-150 dark:bg-navy-500"
>
<div
class=
"w-3/12 rounded-full bg-error"
></div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"card p-4 sm:p-5"
>
<h3
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Technologies
</h3>
<div
class=
"mt-4 flex h-1.5 space-x-1"
>
<div
class=
"w-4/12 rounded-full bg-primary dark:bg-accent"
></div>
<div
class=
"w-3/12 rounded-full bg-secondary"
></div>
<div
class=
"w-2/12 rounded-full bg-success"
></div>
<div
class=
"w-2/12 rounded-full bg-warning"
></div>
<div
class=
"w-1/12 rounded-full bg-error"
></div>
</div>
<div
class=
"inline-space mt-3 flex flex-wrap"
>
<div
class=
"badge space-x-2.5 p-0 text-primary dark:text-accent-light"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
HTML
</span>
</div>
<div
class=
"badge space-x-2.5 p-0 text-secondary dark:text-secondary-light"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
CSS
</span>
</div>
<div
class=
"badge space-x-2.5 p-0 text-success"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
JavaScript
</span>
</div>
<div
class=
"badge space-x-2.5 p-0 text-warning"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Vue
</span>
</div>
<div
class=
"badge space-x-2.5 p-0 text-error"
>
<div
class=
"h-2 w-2 rounded-full bg-current"
></div>
<span>
Go
</span>
</div>
</div>
</div>
</div>
<div
class=
"space-y-4 sm:space-y-5 lg:space-y-6"
>
<div
class=
"card"
>
<div
class=
"absolute top-0 left-0 p-4"
>
<p>
Daily Visits
</p>
<p
class=
"text-3xl font-semibold text-slate-700 dark:text-navy-100"
>
234
</p>
</div>
<div>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.dailyVisitWidget);
$el._x_chart.render()
});"
></div>
</div>
</div>
<div
class=
"card p-4 sm:p-5"
>
<div
class=
"flex items-center justify-between"
>
<div
class=
"mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10 dark:bg-accent-light/10"
>
<i
class=
"fa fa-user text-xl text-primary dark:text-accent-light"
></i>
</div>
<div
class=
"flex items-center space-x-2"
>
<span
class=
"text-success"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
viewBox=
"0 0 20 20"
fill=
"currentColor"
>
<path
fill-rule=
"evenodd"
d=
"M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule=
"evenodd"
/>
</svg>
</span>
<span
class=
"text-base font-semibold text-slate-700 dark:text-navy-100"
>
1.2%
</span>
</div>
</div>
<div
class=
"mt-4 flex items-end justify-between"
>
<div>
<p
class=
"text-3xl font-semibold text-slate-700 dark:text-navy-100"
>
1024
</p>
<p>
New Users
</p>
</div>
<div
class=
"mt-3 flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-6 w-6 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-6 w-6 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-6 w-6 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
</div>
</div>
<div
class=
"card flex-row justify-between p-4 sm:p-5"
>
<div>
<p
class=
"text-base font-medium text-slate-700 dark:text-navy-100"
>
New Products
</p>
<div
class=
"mt-4 flex items-baseline space-x-1"
>
<p
class=
"text-2xl font-semibold text-slate-700 dark:text-navy-100"
>
21
</p>
<p
class=
"text-xs text-success"
>
+21%
</p>
</div>
<p
class=
"text-xs+"
>
Lorem ipsum dolor sit amet
</p>
</div>
<div
class=
"mask is-squircle flex h-10 w-10 items-center justify-center bg-warning/10"
>
<i
class=
"fa fa-gift text-xl text-warning"
></i>
</div>
<div
class=
"absolute bottom-0 right-0 overflow-hidden rounded-lg"
>
<i
class=
"fa fa-gift translate-x-1/4 translate-y-1/4 text-5xl opacity-15"
></i>
</div>
</div>
<div
class=
"card bg-primary p-4 dark:bg-accent"
>
<div
class=
"flex items-center space-x-3"
>
<div
class=
"flex"
>
<div
class=
"avatar"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
<div>
<p
class=
"font-medium text-white"
>
John Doe
</p>
<p
class=
"text-xs text-indigo-100"
>
55 min ago
</p>
</div>
</div>
<div
class=
"mt-2"
>
<p
class=
"text-xs+ text-indigo-100"
>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
<div
class=
"pt-2"
>
<div
class=
"badge rounded-full border border-white text-white"
>
Tag 1
</div>
</div>
</div>
<div
class=
"card p-4 sm:p-5"
>
<div
class=
"flex items-center space-x-2"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5 text-slate-400 dark:text-navy-300"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p
class=
"text-xs+"
>
June 23, 2021
</p>
</div>
<p
class=
"mt-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
UI/UX Design, Mobile Design
</p>
<div
class=
"mt-2"
>
<div
class=
"badge h-5 bg-success/10 px-2 text-success dark:bg-success/15"
>
UI/UX Design
</div>
<div
class=
"badge h-5 bg-warning/10 px-2 text-warning dark:bg-warning/15"
>
Mobile
</div>
</div>
<div
class=
"mt-5 flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-6 w-6 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-6 w-6 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-6 w-6 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
</div>
</div>
<div
class=
"card"
>
<h3
class=
"p-4 text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100 sm:p-5"
>
New Followers
</h3>
<div
class=
"is-scrollbar-hidden flex space-x-4 overflow-x-auto px-5 pb-4 sm:px-5"
>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
John
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Doe
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Raul
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Alfredo
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Travis
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Curtis
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Konnor
</p>
</div>
<div
class=
"text-center"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<p
class=
"mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
>
Guzman
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-workspaces.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Workspace Dashboard"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"mt-5 flex items-center justify-between"
>
<h3
class=
"text-lg font-medium text-slate-700 line-clamp-1 dark:text-navy-50"
>
Workspaces Overview
</h3>
<div
class=
"flex"
>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
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"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
<button
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</button>
</div>
</div>
<div
class=
"mt-4 grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6"
>
<div
class=
"card group col-span-12 lg:col-span-7"
>
<div
class=
"mt-3 flex items-center justify-between px-4 sm:px-5"
>
<div
class=
"flex flex-1 items-center justify-between space-x-2 sm:flex-initial"
>
<h2
class=
"text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Server traffic
</h2>
<div
x-data=
"usePopper({ placement: 'bottom-start', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
:class=
"!isShowPopper && 'sm:opacity-0'"
class=
"inline-flex focus-within:opacity-100 group-hover:opacity-100"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class=
"hidden justify-between space-x-4 text-xs+ sm:flex"
x-data=
"{ activeTab: 'tabAll' }"
>
<button
@
click=
"activeTab = 'tabRecent'"
class=
"font-medium tracking-wide"
:class=
"activeTab === 'tabRecent' && 'text-primary dark:text-accent-light'"
>
Last 7 days
</button>
<button
@
click=
"activeTab = 'tabAll'"
class=
"font-medium tracking-wide"
:class=
"activeTab === 'tabAll' && 'text-primary dark:text-accent-light'"
>
All time
</button>
</div>
</div>
<div
class=
"ax-transparent-gridline pr-2"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.serverTraffic);
$el._x_chart.render()
});"
></div>
</div>
</div>
<div
class=
"order-first col-span-12 grid grid-cols-2 gap-4 sm:order-none sm:gap-5 lg:col-span-5 lg:gap-6"
>
<div
class=
"card row-span-2 justify-between py-5 px-2 text-center"
>
<p
class=
"font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
CPU Usage
</p>
<div
class=
"ax-transparent-gridline pr-1"
>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.cpuUsage);
$el._x_chart.render()
});"
></div>
</div>
<p
class=
"mt-4 text-xs+"
>
Daily usage is
<span
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Good
</span>
</p>
</div>
<div
class=
"card justify-center p-4"
>
<div
class=
"flex items-center space-x-3"
>
<div>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.storageUsage);
$el._x_chart.render()
});"
></div>
</div>
<div
class=
"text-xs+ font-medium text-slate-700 dark:text-navy-100"
>
Storage Usage
</div>
</div>
</div>
<div
class=
"card justify-center p-4"
>
<div
class=
"flex items-center space-x-3"
>
<div>
<div
x-init=
"$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.memoryUsage);
$el._x_chart.render()
});"
></div>
</div>
<div
class=
"text-xs+ font-medium text-slate-700 dark:text-navy-100"
>
Memory Usage
</div>
</div>
</div>
<div
class=
"card flex-row overflow-hidden"
>
<div
class=
"h-full w-1 shrink-0 bg-primary dark:bg-accent"
></div>
<div
class=
"p-4 font-inter"
>
<div
class=
"flex items-baseline space-x-2"
>
<p
class=
"text-2xl font-semibold text-slate-700 dark:text-navy-100"
>
4.54
</p>
<p
class=
"text-xs"
>
/12 GB
</p>
</div>
<p
class=
"text-xs"
>
Daily traffic
</p>
</div>
</div>
<div
class=
"card flex-row overflow-hidden"
>
<div
class=
"h-full w-1 shrink-0 bg-info"
></div>
<div
class=
"p-4 font-inter"
>
<div
class=
"flex items-baseline space-x-2"
>
<p
class=
"text-2xl font-semibold text-slate-700 dark:text-navy-100"
>
14.54
</p>
<p
class=
"text-xs"
>
/12 GB
</p>
</div>
<p
class=
"text-xs"
>
Hourly traffic
</p>
</div>
</div>
</div>
</div>
<div
class=
"mt-4 sm:mt-5 lg:mt-6"
>
<div
class=
"flex items-center justify-between"
>
<h2
class=
"text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
>
Monitoring Workspaces
</h2>
<div
class=
"flex"
>
<div
class=
"flex items-center"
x-data=
"{ isInputActive: false }"
>
<label
class=
"block"
>
<input
x-effect=
"isInputActive === true && $nextTick(() => { $el.focus()});"
:class=
"isInputActive ? 'w-32 lg:w-48' : 'w-0'"
class=
"form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200"
placeholder=
"Search here..."
type=
"text"
/>
</label>
<button
@
click=
"isInputActive = !isInputActive"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class=
"mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6"
>
<div
class=
"card space-y-6 p-4 sm:px-5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-lg font-semibold uppercase text-primary dark:text-accent-light"
>
Id: 5988745
</p>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p
class=
"text-xs uppercase"
>
Current Status
</p>
<p
class=
"text-base font-medium text-success"
>
Up for 7 hours
</p>
</div>
<div
class=
"flex grow justify-between space-x-2"
>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Total Uptime
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
96.4%
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Response
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
3.4 s
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Memory
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
14 GB
</p>
</div>
</div>
<div
class=
"space-y-3"
>
<div
class=
"flex justify-between"
>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
Country
</p>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
traffic
</p>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/usa-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Unated States
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
4.5 GB
</span>
<span
class=
"text-xs"
>
/8 GB
</span>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/russia-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Russia
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
6.22 GB
</span>
<span
class=
"text-xs"
>
/12 GB
</span>
</div>
</div>
</div>
<div
class=
"flex flex-wrap space-x-2"
>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
195.161.66.25
</div>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
215.122.127.155
</div>
</div>
</div>
<div
class=
"card space-y-6 p-4 sm:px-5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-lg font-semibold uppercase text-primary dark:text-accent-light"
>
Id: 6518869
</p>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p
class=
"text-xs uppercase"
>
Current Status
</p>
<p
class=
"text-base font-medium text-success"
>
Up for 2 hours
</p>
</div>
<div
class=
"flex grow justify-between space-x-2"
>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Total Uptime
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
98.2%
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Response
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
4.3 s
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Memory
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
22 GB
</p>
</div>
</div>
<div
class=
"space-y-3"
>
<div
class=
"flex justify-between"
>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
Country
</p>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
traffic
</p>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/australia-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Australia
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
3.76 GB
</span>
<span
class=
"text-xs"
>
/5 GB
</span>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/united-kingdom-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
UK
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
6.65 GB
</span>
<span
class=
"text-xs"
>
/10 GB
</span>
</div>
</div>
</div>
<div
class=
"flex flex-wrap space-x-2"
>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
195.161.66.25
</div>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
215.122.127.155
</div>
</div>
</div>
<div
class=
"card space-y-6 p-4 sm:px-5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-lg font-semibold uppercase text-primary dark:text-accent-light"
>
Id: 3591458
</p>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p
class=
"text-xs uppercase"
>
Current Status
</p>
<p
class=
"text-base font-medium text-warning"
>
Down for 22 minutes
</p>
</div>
<div
class=
"flex grow justify-between space-x-2"
>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Total Uptime
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
95.7%
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Response
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
2.1 s
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Memory
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
6 GB
</p>
</div>
</div>
<div
class=
"space-y-3"
>
<div
class=
"flex justify-between"
>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
Country
</p>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
traffic
</p>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/brazil-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Brazil
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
6.1 GB
</span>
<span
class=
"text-xs"
>
/20 GB
</span>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/spain-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Spain
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
5.02 GB
</span>
<span
class=
"text-xs"
>
/10 GB
</span>
</div>
</div>
</div>
<div
class=
"flex flex-wrap space-x-2"
>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
195.161.66.25
</div>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
215.122.127.155
</div>
</div>
</div>
<div
class=
"card space-y-6 p-4 sm:px-5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-lg font-semibold uppercase text-primary dark:text-accent-light"
>
Id: 9462157
</p>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p
class=
"text-xs uppercase"
>
Current Status
</p>
<p
class=
"text-base font-medium text-success"
>
Up for 48 hours
</p>
</div>
<div
class=
"flex grow justify-between space-x-2"
>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Total Uptime
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
98.7%
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Response
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
1.7 s
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Memory
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
9 GB
</p>
</div>
</div>
<div
class=
"space-y-3"
>
<div
class=
"flex justify-between"
>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
Country
</p>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
traffic
</p>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/india-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
India
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
4.5 GB
</span>
<span
class=
"text-xs"
>
/12 GB
</span>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/russia-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Russia
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
6.2 GB
</span>
<span
class=
"text-xs"
>
/8 GB
</span>
</div>
</div>
</div>
<div
class=
"flex flex-wrap space-x-2"
>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
195.161.66.25
</div>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
215.122.127.155
</div>
</div>
</div>
<div
class=
"card space-y-6 p-4 sm:px-5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-lg font-semibold uppercase text-primary dark:text-accent-light"
>
Id: 6517997
</p>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p
class=
"text-xs uppercase"
>
Current Status
</p>
<p
class=
"text-base font-medium text-warning"
>
Down for 6 minutes
</p>
</div>
<div
class=
"flex grow justify-between space-x-2"
>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Total Uptime
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
95.43%
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Response
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
4.65 s
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Memory
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
12 GB
</p>
</div>
</div>
<div
class=
"space-y-3"
>
<div
class=
"flex justify-between"
>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
Country
</p>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
traffic
</p>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/china-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
China
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
6.6 GB
</span>
<span
class=
"text-xs"
>
/10 GB
</span>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/usa-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
United States
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
9.9 GB
</span>
<span
class=
"text-xs"
>
/11 GB
</span>
</div>
</div>
</div>
<div
class=
"flex flex-wrap space-x-2"
>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
195.161.66.25
</div>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
215.122.127.155
</div>
</div>
</div>
<div
class=
"card space-y-6 p-4 sm:px-5"
>
<div
class=
"flex items-center justify-between"
>
<div>
<p
class=
"text-lg font-semibold uppercase text-primary dark:text-accent-light"
>
Id: 7958652
</p>
</div>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p
class=
"text-xs uppercase"
>
Current Status
</p>
<p
class=
"text-base font-medium text-success"
>
Up for 2 hours
</p>
</div>
<div
class=
"flex grow justify-between space-x-2"
>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Total Uptime
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
97.27%
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Response
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
3.88 s
</p>
</div>
<div>
<p
class=
"text-xs+ text-slate-400 dark:text-navy-300"
>
Memory
</p>
<p
class=
"text-lg font-semibold text-slate-700 dark:text-navy-100"
>
10 GB
</p>
</div>
</div>
<div
class=
"space-y-3"
>
<div
class=
"flex justify-between"
>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
Country
</p>
<p
class=
"text-xs uppercase text-slate-400 dark:text-navy-300"
>
traffic
</p>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/italy-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Italy
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
14.5 GB
</span>
<span
class=
"text-xs"
>
/20 GB
</span>
</div>
</div>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center space-x-2"
>
<img
class=
"h-6 w-6"
src=
"{{ asset('images/flags/switzerland-round.svg') }}"
alt=
"flag"
/>
<p
class=
"font-medium text-slate-700 dark:text-navy-100"
>
Switzerland
</p>
</div>
<div
class=
"font-inter"
>
<span
class=
"text-right font-medium text-slate-700 dark:text-navy-100"
>
9.4 GB
</span>
<span
class=
"text-xs"
>
/16 GB
</span>
</div>
</div>
</div>
<div
class=
"flex flex-wrap space-x-2"
>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
195.161.66.25
</div>
<div
class=
"badge bg-info/10 text-info dark:bg-info/15"
>
215.122.127.155
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/elements-alert.blade.php
deleted
100644 → 0
View file @
5bad2db9
<x-app-layout
title=
"Alert Element"
is-sidebar-open=
"true"
is-header-blur=
"true"
>
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"flex items-center space-x-4 py-5 lg:py-6"
>
<h2
class=
"text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Alert
</h2>
<div
class=
"hidden h-full py-1 sm:flex"
>
<div
class=
"h-full w-px bg-slate-300 dark:bg-navy-600"
></div>
</div>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"#"
>
Elements
</a
>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li>
Alert
</li>
</ul>
</div>
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:grid-cols-2 lg:gap-6"
>
<!-- Basic Alert -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Basic Alert
</h2>
<label
class=
"flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-2xl"
>
<p>
The alert component is used to convey important information to
the user through the use of contextual types, icons, and colors
</p>
<div
class=
"mt-5 space-y-4"
>
<div
class=
"alert flex rounded-lg bg-slate-200 px-4 py-4 text-slate-600 dark:bg-navy-500 dark:text-navy-100 sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg bg-primary px-4 py-4 text-white dark:bg-accent sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg bg-secondary px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg bg-info px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg bg-success px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg bg-warning px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg bg-error px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
class=
"
alert flex rounded-lg bg-slate-200 px-4 py-4 text-slate-600 dark:bg-navy-500 dark:text-navy-100 sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-lg bg-primary px-4 py-4 text-white dark:bg-accent sm:px-5
"
>
This is simple alert
<
/div
>
<
div class=
"
alert flex rounded-lg bg-secondary px-4 py-4 text-white sm:px-5
">
This is simple alert
<
/div
>
<
div class=
"
alert flex rounded-lg bg-info px-4 py-4 text-white sm:px-5
">
This is simple alert
<
/div
>
<
div class=
"
alert flex rounded-lg bg-success px-4 py-4 text-white sm:px-5
">
This is simple alert
<
/div
>
<
div class=
"
alert flex rounded-lg bg-warning px-4 py-4 text-white sm:px-5
">
This is simple alert
<
/div
>
<
div class=
"
alert flex rounded-lg bg-error px-4 py-4 text-white sm:px-5
">
This is simple alert
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Outlined Alert -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Outlined Alert
</h2>
<label
class=
"flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-2xl"
>
<p>
Alerts can be outlied. Check out code for detail of usage.
</p>
<div
class=
"mt-5 space-y-4"
>
<div
class=
"alert flex rounded-lg border border-slate-300 px-4 py-4 text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg border border-primary px-4 py-4 text-primary dark:border-accent dark:text-accent-light sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg border border-secondary px-4 py-4 text-secondary dark:border-secondary dark:text-secondary-light sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg border border-info px-4 py-4 text-info sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg border border-success px-4 py-4 text-success sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg border border-warning px-4 py-4 text-warning sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-lg border border-error px-4 py-4 text-error sm:px-5"
>
This is simple alert
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
class=
"
alert flex rounded-lg border border-slate-300 px-4 py-4 text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-lg border border-primary px-4 py-4 text-primary dark:border-accent dark:text-accent-light sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-lg border border-secondary px-4 py-4 text-secondary dark:border-secondary dark:text-secondary-light sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-lg border border-info px-4 py-4 text-info sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-lg border border-success px-4 py-4 text-success sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-lg border border-warning px-4 py-4 text-warning sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-lg border border-error px-4 py-4 text-error sm:px-5
"
>
This is simple alert
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Soft Color Alert -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Outlined Alert
</h2>
<label
class=
"flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-2xl"
>
<p>
Alerts can have a soft colors. To do this, you should use some
opacity. Check out code for detail of usage.
</p>
<div
class=
"mt-5 space-y-4"
>
<div
class=
"alert flex rounded-full bg-primary/10 py-4 px-4 text-primary dark:bg-accent-light/15 dark:text-accent-light sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-full bg-secondary/10 py-4 px-4 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-full bg-info/10 py-4 px-4 text-info dark:bg-info/15 sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-full bg-success/10 py-4 px-4 text-success dark:bg-success/15 sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-full bg-warning/10 py-4 px-4 text-warning dark:bg-warning/15 sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex rounded-full bg-error/10 py-4 px-4 text-error dark:bg-error/15 sm:px-5"
>
This is simple alert
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
class=
"
alert flex rounded-full bg-primary/10 py-4 px-4 text-primary dark:bg-accent-light/15 dark:text-accent-light sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-full bg-secondary/10 py-4 px-4 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-full bg-info/10 py-4 px-4 text-info dark:bg-info/15 sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-full bg-success/10 py-4 px-4 text-success dark:bg-success/15 sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-full bg-warning/10 py-4 px-4 text-warning dark:bg-warning/15 sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex rounded-full bg-error/10 py-4 px-4 text-error dark:bg-error/15 sm:px-5
"
>
This is simple alert
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Bordered Alert -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Bordered Alert
</h2>
<label
class=
"flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-2xl"
>
<p>
Alerts can have a border. Check out code for detail of usage.
</p>
<div
class=
"mt-5 space-y-4"
>
<div
class=
"alert flex rounded-full border border-primary bg-primary/10 py-4 px-4 text-primary dark:border-accent dark:bg-accent-light/15 dark:text-accent-light sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex overflow-hidden rounded-lg bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
>
<div
class=
"w-1.5 bg-secondary"
></div>
<div
class=
"p-4"
>
This is simple alert
</div>
</div>
<div
class=
"alert flex overflow-hidden rounded-lg border border-info text-info"
>
<div
class=
"bg-info p-3 text-white"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div
class=
"px-4 py-3 sm:px-5"
>
This is simple alert
</div>
</div>
<div
class=
"alert flex rounded-lg border border-success/30 bg-success/10 py-4 px-4 text-success sm:px-5"
>
This is simple alert
</div>
<div
class=
"alert flex overflow-hidden rounded-lg bg-warning/10 text-warning dark:bg-warning/15"
>
<div
class=
"flex flex-1 items-center space-x-3 p-4"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<div
class=
"flex-1"
>
This is simple alert
</div>
</div>
<div
class=
"w-1.5 bg-warning"
></div>
</div>
<div
class=
"alert flex space-x-2 rounded-lg border border-error px-4 py-4 text-error"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
viewBox=
"0 0 20 20"
fill=
"currentColor"
>
<path
fill-rule=
"evenodd"
d=
"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule=
"evenodd"
/>
</svg>
<p>
This is simple alert
</p>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
class=
"
alert flex rounded-full border border-primary bg-primary/10 py-4 px-4 text-primary dark:border-accent dark:bg-accent-light/15 dark:text-accent-light sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex overflow-hidden rounded-lg bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light
"
>
<
div class=
"
w-1.5 bg-secondary
"><
/div
>
<
div class=
"
p-4
">
This is simple alert
<
/div
>
<
/div
>
<
div
class=
"
alert flex overflow-hidden rounded-lg border border-info text-info
"
>
<
div class=
"
bg-info p-3 text-white
">
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z
"
/
>
<
/svg
>
<
/div
>
<
div class=
"
px-4 py-3 sm:px-5
">
This is simple alert
<
/div
>
<
/div
>
<
div
class=
"
alert flex rounded-lg border border-success/30 bg-success/10 py-4 px-4 text-success sm:px-5
"
>
This is simple alert
<
/div
>
<
div
class=
"
alert flex overflow-hidden rounded-lg bg-warning/10 text-warning dark:bg-warning/15
"
>
<
div class=
"
flex flex-1 items-center space-x-3 p-4
">
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z
"
/
>
<
/svg
>
<
div class=
"
flex-1
">
This is simple alert
<
/div
>
<
/div
>
<
div class=
"
w-1.5 bg-warning
"><
/div
>
<
/div
>
<
div
class=
"
alert flex space-x-2 rounded-lg border border-error px-4 py-4 text-error
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5
"
viewBox=
"
0 0 20 20
"
fill=
"
currentColor
"
>
<
path
fill-rule=
"
evenodd
"
d=
"
M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z
"
clip-rule=
"
evenodd
"
/
>
<
/svg
>
<
p
>
This is simple alert
<
/p
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Dismissable Alert -->
<div
class=
"card px-4 pb-4 sm:px-5 lg:col-span-2"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Dismissable Alert
</h2>
<label
class=
"flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-2xl"
>
<p>
Alerts can be dismissable. Check out code for detail of usage.
</p>
<div
class=
"mt-5 space-y-4"
>
<div
x-data=
"{isShow:true}"
:class=
"!isShow && 'opacity-0 transition-opacity duration-300'"
class=
"alert flex items-center justify-between overflow-hidden rounded-lg border border-info text-info"
>
<div
class=
"flex"
>
<div
class=
"bg-info p-3 text-white"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div
class=
"px-4 py-3 sm:px-5"
>
This is simple alert
</div>
</div>
<div
class=
"px-2"
>
<button
@
click=
"isShow = false; setTimeout(()=>$root.remove(),300)"
class=
"btn h-7 w-7 rounded-full p-0 font-medium text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
<div
x-data=
"{isShow:true}"
data-alert-root
:class=
"!isShow && 'opacity-0 transition-opacity duration-300'"
class=
"alert flex items-center justify-between overflow-hidden rounded-lg bg-navy-900 py-4 px-4 text-slate-200 dark:text-navy-100 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet consectetur.
</p>
<div
x-data=
"usePopper({placement:'bottom-end',offset:4})"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-7 w-7 shrink-0 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
@
click=
"isShow = false; setTimeout(()=>$el.closest('[data-alert-root]').remove(),300)"
href=
"javascript:void(0);"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Remove
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated Link
</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
x-data=
"{isShow:true}"
:class=
"!isShow && 'opacity-0 transition-opacity duration-300'"
class=
"alert flex flex-col items-center justify-between space-y-4 rounded-lg border border-slate-300 px-4 py-3 text-center text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:flex-row sm:space-y-0 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet consectetur.
</p>
<button
@
click=
"isShow = false; setTimeout(()=>$root.remove(),300)"
class=
"btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
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"
/>
</svg>
<span>
REMIND ME LATER
</span>
</button>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div class=
"
space-y-4
">
<
div
x-data=
"
{isShow:true}
"
:class=
"
!isShow
&&
'
opacity-0 transition-opacity duration-300
'"
class=
"
alert flex items-center justify-between overflow-hidden rounded-lg border border-info text-info
"
>
<
div class=
"
flex
">
<
div class=
"
bg-info p-3 text-white
">
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z
"
/
>
<
/svg
>
<
/div
>
<
div class=
"
px-4 py-3 sm:px-5
">
This is simple alert
<
/div
>
<
/div
>
<
div class=
"
px-2
">
<
button
@click=
"
isShow = false; setTimeout(()=
>
$root.remove(),300)
"
class=
"
btn h-7 w-7 rounded-full p-0 font-medium text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4 w-4
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M6 18L18 6M6 6l12 12
"
/
>
<
/svg
>
<
/button
>
<
/div
>
<
/div
>
<
div
x-data=
"
{isShow:true}
"
data-alert-root
:class=
"
!isShow
&&
'
opacity-0 transition-opacity duration-300
'"
class=
"
alert flex items-center justify-between overflow-hidden rounded-lg bg-navy-900 py-4 px-4 text-slate-200 dark:text-navy-100 sm:px-5
"
>
<
p
>
Lorem ipsum dolor sit amet consectetur.
<
/p
>
<
div
x-data=
"
usePopper({placement:
'
bottom-end
'
,offset:4})
"
@click.outside=
"
if(isShowPopper) isShowPopper = false
"
class=
"
inline-flex
"
>
<
button
x-ref=
"
popperRef
"
@click=
"
isShowPopper = !isShowPopper
"
class=
"
btn -mr-1.5 h-7 w-7 shrink-0 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4 w-4
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z
"
/
>
<
/svg
>
<
/button
>
<
div
x-ref=
"
popperRoot
"
class=
"
popper-root
"
:class=
"
isShowPopper
&&
'
show
'"
>
<
div
class=
"
popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700
"
>
<
ul
>
<
li
>
<
a
@click=
"
isShow = false; setTimeout(()=
>
$el.closest(
'
[data-alert-root]
'
).remove(),300)
"
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Remove
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Another Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
/ul
>
<
div class=
"
my-1 h-px bg-slate-150 dark:bg-navy-500
"><
/div
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Separated Link
<
/a
>
<
/li
>
<
/ul
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
x-data=
"
{isShow:true}
"
:class=
"
!isShow
&&
'
opacity-0 transition-opacity duration-300
'"
class=
"
alert flex flex-col items-center justify-between space-y-4 rounded-lg border border-slate-300 px-4 py-3 text-center text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:flex-row sm:space-y-0 sm:px-5
"
>
<
p
>
Lorem ipsum dolor sit amet consectetur.
<
/p
>
<
button
@click=
"
isShow = false; setTimeout(()=
>
$root.remove(),300)
"
class=
"
btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
1.5
"
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
"
/
>
<
/svg
>
<
span
>
REMIND ME LATER
<
/span
>
<
/button
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
Prev
1
2
3
4
5
Next
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
