25 May, 2022
Projects
Activity
$2,139.22
**** **** **** 8945
$2,139.22
**** **** **** 8945
$2,139.22
**** **** **** 8945
11.3 hr
Working Hours
13 /22
Completed tasks
Bitcoin
60.33$
+3.3%
Solana
20.56$
+4.11%
John D.
2 min read
Travis F.
5 min read
Alfredo E .
4 min read
35GB of 1TB
Upgrade14
Pending
36
Completed
143
In Progress
279
Total
LMS App Design
Updated at 7 Sep
25%
Store Dashboard
Updated at 11 Sep
49%
Chat Mobile App
Updated at 19 Sep
13%
NFT Marketplace App
Updated at 5 Sep
78%
Today
6hr 22m
User Photo Changed
12 minute agoJohn Doe changed his avatar photo
Design Completed
3 hours agoRobert Nolan completed the design of the CRM application
File_final.figER Diagram
a day agoTeam completed the ER diagram app
Members:
Weekly Report
a day agoThe weekly report was uploaded
Pagination is a group of buttons that allow the user to navigate between a set of related content. Check out code for detail of usage.
<ol class="pagination">
<li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
<a
href="#"
class="flex size-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="size-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 size-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="size-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"
></path>
</svg>
</a>
</li>
</ol>
<ol class="pagination">
<li class="rounded-l-full bg-slate-150 dark:bg-navy-500">
<a
href="#"
class="flex size-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="size-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 size-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="size-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"
></path>
</svg>
</a>
</li>
</ol>
<ol class="pagination space-x-1.5">
<li>
<a
href="#"
class="flex size-8 items-center justify-center rounded-lg bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 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="size-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>
<a
href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>1</a
>
</li>
<li>
<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>
<a
href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>3</a
>
</li>
<li>
<a
href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>4</a
>
</li>
<li>
<a
href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>5</a
>
</li>
<li>
<a
href="#"
class="flex size-8 items-center justify-center rounded-lg bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 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="size-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"
></path>
</svg>
</a>
</li>
</ol>
<ol class="pagination space-x-1.5">
<li>
<a
href="#"
class="flex size-8 items-center justify-center rounded-full bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 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="size-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>
<a
href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>1</a
>
</li>
<li>
<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>
<a
href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>3</a
>
</li>
<li>
<a
href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>4</a
>
</li>
<li>
<a
href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-slate-150 px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>5</a
>
</li>
<li>
<a
href="#"
class="flex size-8 items-center justify-center rounded-full bg-slate-150 text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:bg-navy-500 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="size-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"
></path>
</svg>
</a>
</li>
</ol>
Pagination is a group of buttons that allow the user to navigate between a set of related content. Check out code for detail of usage.
<!-- First -->
<ol class="pagination">
<li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
<a
href="#"
class="flex size-7 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="size-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-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ 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-7 min-w-[1.75rem] items-center justify-center rounded-lg bg-primary px-2 text-xs+ 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-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ 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-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ 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-7 min-w-[1.75rem] items-center justify-center rounded-lg px-2 text-xs+ 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 size-7 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="size-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"
></path>
</svg>
</a>
</li>
</ol>
<!-- Second -->
<ol class="pagination">
<li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
<a
href="#"
class="flex size-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="size-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 size-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="size-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"
></path>
</svg>
</a>
</li>
</ol>
<!-- Third -->
<ol class="pagination">
<li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
<a
href="#"
class="flex size-10 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="size-4.5"
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-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ 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-10 min-w-[2.5rem] items-center justify-center rounded-lg bg-primary px-3 text-sm+ 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-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ 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-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ 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-10 min-w-[2.5rem] items-center justify-center rounded-lg px-3 text-sm+ 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 size-10 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="size-4.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"
></path>
</svg>
</a>
</li>
</ol>