این صفحه را قبل استفاده از کامپوننتها ببینید :) در صورت عدم بارگذاری پیش‌نمایش با Vpn امتحان کنید.
  • طرح‌بندی نوار کناری
پیش فرض

از این نمونه‌ طرح بندی نوار کناری می توانید برای ساخت رابط‌ کاربری یک پنل مدیریت و... استفاده کنید.

<!DOCTYPE html>
<html lang="fa" dir="rtl" x-bind:class="darkMode ? 'dark' : ''" x-data="{ darkMode: false }">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Layouts • Default • RTL</title>
</head>

<body>
    <div class="min-h-screen bg-white dark:bg-black" x-data="{ navigation: false, overlay: false }">
        <!-- sidebar -->
        <div class="fixed rtl:right-0 ltr:left-0 w-72 h-screen flex flex-col bg-white dark:bg-black border-e border-zinc-200 dark:border-zinc-800 overflow-y-auto space-y-3 md:!translate-x-0 transition-transform z-50"
            x-bind:class="navigation ? 'translate-x-0' : 'rtl:translate-x-full ltr:-translate-x-full'">
            <div class="flex items-center justify-between gap-x-4 bg-white dark:bg-black sticky top-0 p-5 z-10">
                <!-- logo -->
                <a href="#" class="inline-flex items-center text-black dark:text-white gap-x-2">
                    <span class="inline-block w-32 h-5 bg-zinc-100 dark:bg-zinc-900 rounded-full"></span>
                </a><!-- end logo -->

                <!-- close-button -->
                <button x-on:click="navigation = false;overlay = false"
                    class="md:hidden text-black dark:text-white focus:outline-none hover:text-red-500">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button><!-- end close-button -->
            </div>
            <div class="md:hidden relative px-5">
                <form action="#">
                    <div class="flex items-center relative">
                        <input type="text"
                            class="form-input w-full h-10 !ring-0 focus:!ring-offset-0 bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 focus:border-zinc-200 dark:focus:bg-zinc-800 rounded-lg font-semibold text-xs text-black dark:text-white placeholder:text-zinc-400 ps-8"
                            placeholder="جستجو ..." />
                        <span class="absolute rtl:right-2 ltr:left-2 text-zinc-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                            </svg>
                        </span>
                    </div>
                </form>
            </div>
            <div class="flex-auto p-5">
                <ul class="flex flex-col space-y-1">
                    <li>
                        <a href="#"
                            class="w-full flex items-center gap-x-2 relative bg-transparent border border-solid border-transparent rounded-xl text-zinc-400 transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                class="w-5 h-5">
                                <path fill-rule="evenodd"
                                    d="M2 6.75A.75.75 0 012.75 6h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 6.75zm0 6.5a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="font-semibold text-xs">پیشخوان</span>
                        </a>
                    </li>
                    <!-- active single menu -->
                    <!-- <li>
                        <a href="#"
                            class="w-full flex items-center gap-x-2 relative bg-zinc-50 dark:bg-zinc-950 border border-solid border-zinc-200 dark:border-zinc-800 rounded-xl text-black dark:text-white transition-all py-2 px-3">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                class="w-5 h-5">
                                <path fill-rule="evenodd"
                                    d="M2 6.75A.75.75 0 012.75 6h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 6.75zm0 6.5a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="font-semibold text-xs">پیشخوان</span>
                        </a>
                    </li> -->
                    <!-- end active single menu -->
                    <li x-data="{ open: false }">
                        <button type="button"
                            class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                            x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                            x-on:click="open = !open">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
                            </svg>
                            <span class="font-semibold text-xs">نوشته ها</span>
                            <span class="absolute rtl:left-3 ltr:right-3" x-bind:class="open ? 'rotate-180' : ''">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </span>
                        </button>
                        <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                            x-show="open">
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">همه</span>
                                </a>
                            </li>
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">نوشته
                                        جدید</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li x-data="{ open: false }">
                        <button type="button"
                            class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                            x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                            x-on:click="open = !open">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125z" />
                            </svg>
                            <span class="font-semibold text-xs">محصول ها</span>
                            <span class="absolute rtl:left-3 ltr:right-3" x-bind:class="open ? 'rotate-180' : ''">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </span>
                        </button>
                        <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                            x-show="open">
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">همه</span>
                                </a>
                            </li>
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">محصول
                                        جدید</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li x-data="{ open: false }">
                        <button type="button"
                            class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                            x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                            x-on:click="open = !open">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                            </svg>
                            <span class="font-semibold text-xs">سفارش ها</span>
                            <span class="absolute rtl:left-3 ltr:right-3" x-bind:class="open ? 'rotate-180' : ''">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </span>
                        </button>
                        <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                            x-show="open">
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">همه</span>
                                </a>
                            </li>
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">پیگیری
                                        سفارش</span>
                                </a>
                            </li>
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">سفارش
                                        جدید</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"
                            class="w-full flex items-center gap-x-2 relative bg-transparent border border-solid border-transparent rounded-xl text-zinc-400 transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                            </svg>
                            <span class="font-semibold text-xs">رسانه</span>
                        </a>
                    </li>
                    <li x-data="{ open: false }">
                        <button type="button"
                            class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                            x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                            x-on:click="open = !open">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                            </svg>
                            <span class="font-semibold text-xs">برگه ها</span>
                            <span class="absolute rtl:left-3 ltr:right-3" x-bind:class="open ? 'rotate-180' : ''">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </span>
                        </button>
                        <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                            x-show="open">
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">همه</span>
                                </a>
                            </li>
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">برگه
                                        جدید</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li x-data="{ open: true }">
                        <button type="button"
                            class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                            x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                            x-on:click="open = !open">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                            </svg>
                            <span class="font-semibold text-xs">کاربران</span>
                            <span class="absolute rtl:left-3 ltr:right-3" x-bind:class="open ? 'rotate-180' : ''">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </span>
                        </button>
                        <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                            x-show="open">
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">همه</span>
                                </a>
                            </li>
                            <li>
                                <a href="#"
                                    class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                    <span
                                        class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                    <span class="font-medium text-xs">کاربر
                                        جدید</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"
                            class="w-full flex items-center gap-x-2 relative bg-transparent border border-solid border-transparent rounded-xl text-zinc-400 transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <span class="font-semibold text-xs">ساماندهی</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div><!-- end sidebar -->

        <div class="md:ps-72">
            <!-- top bar -->
            <div
                class="flex items-center justify-between gap-x-5 sticky top-0 bg-white dark:bg-black border-b border-zinc-200 dark:border-zinc-800 p-5 z-30">
                <div class="flex-grow flex items-center gap-x-5">
                    <!-- navigation button & logo -->
                    <div class="md:hidden flex items-center gap-x-2">
                        <button
                            class="inline-flex items-center justify-center w-9 h-9 bg-white dark:bg-zinc-950 border border-solid border-zinc-200 dark:border-zinc-800 rounded-full text-black dark:text-white transition-all"
                            x-on:click="navigation = true;overlay = true">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
                            </svg>
                        </button>
                        <a href="#" class="inline-flex items-center text-black dark:text-white gap-x-2">
                            <span class="inline-block w-20 h-5 bg-zinc-100 dark:bg-zinc-900 rounded-full"></span>
                        </a>
                    </div><!-- end navigation button & logo -->

                    <!-- search -->
                    <div class="md:block hidden relative lg:w-80">
                        <form action="#">
                            <div class="flex items-center relative rtl:pr-5 ltr:pl-5">
                                <input type="text"
                                    class="form-input w-full !ring-0 focus:!ring-offset-0 bg-transparent border-transparent focus:border-transparent rounded-none font-semibold text-xs text-black dark:text-white placeholder:text-zinc-400"
                                    placeholder="جستجو ..." />
                                <span class="absolute rtl:right-0 ltr:left-0 text-zinc-400">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                                    </svg>
                                </span>
                            </div>
                        </form>
                    </div><!-- end search -->
                </div>

                <div class="flex justify-end gap-x-5">
                    <!-- dropdown:notification -->
                    <div class="relative" x-data="{ open: false }">
                        <button type="button"
                            class="flex items-center justify-center w-9 h-9 relative bg-white dark:bg-zinc-950 border border-solid border-zinc-200 dark:border-zinc-800 rounded-full text-black dark:text-white"
                            x-on:click="open = !open">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
                            </svg>
                            <span class="absolute top-0 rtl:-right-1 ltr:-left-1 flex h-3 w-3">
                                <span
                                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span>
                            </span>
                        </button>
                        <div class="absolute top-full rtl:left-0 ltr:right-0 w-60 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-xl p-3 mt-1"
                            x-show="open" x-on:click.outside="open = false">
                            <ul class="flex flex-col relative divide-y divide-zinc-200 dark:divide-zinc-800 p-3">
                                <li>
                                    <a href="#"
                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-orange-400 transition-all hover:text-orange-600 py-2 px-3">
                                        <span
                                            class="inline-block w-5 h-5 bg-zinc-100 dark:bg-zinc-900 rounded-full"></span>
                                        <span
                                            class="inline-block w-32 h-5 bg-zinc-100 dark:bg-zinc-900 rounded-full"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-cyan-400 transition-all hover:text-cyan-600 py-2 px-3">
                                        <span
                                            class="inline-block w-5 h-5 bg-zinc-100 dark:bg-zinc-900 rounded-full"></span>
                                        <span
                                            class="inline-block w-32 h-5 bg-zinc-100 dark:bg-zinc-900 rounded-full"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-red-400 transition-all hover:text-red-600 py-2 px-3">
                                        <span
                                            class="inline-block w-5 h-5 bg-zinc-100 dark:bg-zinc-900 rounded-full"></span>
                                        <span
                                            class="inline-block w-32 h-5 bg-zinc-100 dark:bg-zinc-900 rounded-full"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div><!-- end dropdown:notification -->

                    <!-- dropdown:account -->
                    <div class="relative" x-data="{ open: false }">
                        <button type="button" class="flex items-center gap-x-2 text-black dark:text-white"
                            x-on:click="open = !open">
                            <span class="lg:flex flex-col items-start hidden text-xs space-y-1">
                                <span class="font-bold">ج.بهرامی راد</span>
                                <span class="font-medium text-zinc-400">مدیر</span>
                            </span>
                            <span class="w-9 h-9 rounded-full overflow-hidden">
                                <img src="https://spacedev.ir/images/avatars/avatar.jpg"
                                    class="w-full h-full object-cover" alt="Name & Family">
                            </span>
                            <span class="transition-all" x-bind:class="open ? 'rotate-180' : ''">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </span>
                        </button>
                        <div class="absolute top-full rtl:left-0 ltr:right-0 w-60 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-xl p-3 mt-1"
                            x-show="open" x-on:click.outside="open = false">
                            <ul class="flex flex-col relative divide-y divide-zinc-200 dark:divide-zinc-800 p-3">
                                <li>
                                    <button type="button"
                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-black dark:text-white transition-all hover:opacity-80 py-2 px-3"
                                        x-on:click="darkMode = !darkMode">
                                        <template x-if="!darkMode">
                                            <span class="flex items-center gap-x-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
                                                </svg>
                                                <span class="font-medium text-xs">تم تاریک</span>
                                            </span>
                                        </template>
                                        <template x-if="darkMode">
                                            <span class="flex items-center gap-x-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
                                                </svg>
                                                <span class="font-medium text-xs">تم روشن</span>
                                            </span>
                                        </template>
                                    </button>
                                </li>
                                <li>
                                    <a href="#"
                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-orange-400 transition-all hover:text-orange-600 py-2 px-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
                                        </svg>
                                        <span class="font-medium text-xs">مشاهده پروفایل</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-cyan-400 transition-all hover:text-cyan-600 py-2 px-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3" />
                                        </svg>
                                        <span class="font-medium text-xs">کیف پول</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-red-400 transition-all hover:text-red-600 py-2 px-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
                                        </svg>
                                        <span class="font-medium text-xs">خروج از حساب کاربری</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div><!-- end dropdown:account -->
                </div>
            </div><!-- end top bar -->

            <!-- page content -->
            <div class="w-full max-w-6xl space-y-8 p-5">
                <!-- page title -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-x-2 text-black dark:text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 ">
                            <path
                                d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z">
                            </path>
                        </svg>
                        <span class="font-black text-base">کاربران</span>
                    </div>
                    <a href="#"
                        class="flex items-center justify-center h-12 bg-blue-500 border border-transparent rounded-lg text-white transition-all hover:bg-blue-600 active:scale-95 px-5">
                        <span class="font-semibold text-xs whitespace-nowrap">کاربر جدید</span>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                            class="w-5 h-5 ms-1">
                            <path
                                d="M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z">
                            </path>
                        </svg>
                    </a>
                </div><!-- end page title -->

                <!-- search & filter -->
                <form action="#" class="grow flex items-center gap-x-2">
                    <div
                        class="flex sm:flex-nowrap flex-wrap items-center gap-x-1 w-full max-w-lg relative border border-zinc-200 dark:border-zinc-800 rounded-lg p-1">
                        <input type="text"
                            class="form-input w-full !ring-0 !ring-offset-0 bg-transparent border-transparent focus:border-transparent font-semibold text-xs text-black dark:text-white placeholder:text-zinc-400"
                            placeholder="جستجو از بین کاربران..." />

                        <div class="shrink-0 grow sm:w-36">
                            <!-- form:select container -->
                            <div class="flex flex-col space-y-2">
                                <!-- form:select -->
                                <div class="w-full relative" x-data="{ 
                                            open: false, 
                                            selectedOption: 'مرتب سازی بر اساس', 
                                            selectedValue: '', 
                                            options: [
                                            'نام', 'نام کاربری', 'ایمیل', 'نقش', 'تاریخ ایجاد', 'آخرین ورود', 'فعال/غیرفعال'
                                        ] }">

                                    <!-- The selected value is stored in this input. -->
                                    <input type="hidden" x-model="selectedValue" />

                                    <!-- form:select:button -->
                                    <button type="button" x-on:click="open = !open"
                                        class="flex items-center w-full h-11 relative bg-white dark:bg-black border border-zinc-200 dark:border-zinc-800 rounded-lg font-semibold text-xs rtl:text-right ltr:text-left text-black dark:text-white px-3">
                                        <span class="line-clamp-1" x-text="selectedOption"></span>
                                        <span
                                            class="absolute rtl:left-3 ltr:right-3 pointer-events-none transition-transform"
                                            x-bind:class="open ? 'rotate-180' : ''">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                            </svg>
                                        </span>
                                    </button><!-- end form:select:button -->

                                    <!-- form:select:options container -->
                                    <div class="absolute w-full bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg shadow-lg overflow-hidden mt-2 z-30"
                                        x-show="open" x-on:click.away="open = false">
                                        <ul class="max-h-48 overflow-y-auto">
                                            <template x-for="(month, index) in options" :key="index">
                                                <!-- form:select option -->
                                                <li class="font-medium text-xs text-black dark:text-white cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-900 px-4 py-3"
                                                    x-on:click="selectedOption = month; selectedValue = (index + 1).toString(); open = false"
                                                    x-text="month"></li><!-- end form:select:option -->
                                            </template>
                                        </ul>
                                    </div><!-- end form:select:options container -->
                                </div><!-- end form:select -->
                            </div><!-- end form:select container -->
                        </div>

                        <button type="submit"
                            class="flex items-center justify-center h-10 bg-blue-500 border border-transparent rounded-lg text-white transition-all hover:bg-blue-600 active:scale-95 px-5">
                            <span class="font-semibold text-xs whitespace-nowrap">اعــــمال</span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                                class="w-5 h-5 ms-1">
                                <path
                                    d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z">
                                </path>
                            </svg>
                        </button>
                    </div>
                </form><!-- end search & filter -->

                <!-- table container -->
                <div class="overflow-x-auto">
                    <!-- table -->
                    <table
                        class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-800 border-b border-zinc-200 dark:border-zinc-800">
                        <!-- table:thead -->
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                                    نام
                                </th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                                    عنوان
                                </th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                                    وضعیت
                                </th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                                    نفش
                                </th>
                                <th scope="col" class="px-6 py-3 text-start text-xs font-semibold text-zinc-400">
                                    اقدامات
                                </th>
                            </tr>
                        </thead><!-- end table:thead -->

                        <!-- table:tbody -->
                        <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
                            <!-- table:row -->
                            <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-900">
                                <td class="px-3 py-4">
                                    <input type="checkbox"
                                        class="form-checkbox !ring-0 !ring-offset-0 bg-zinc-200 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-800 checked:!bg-blue-500 dark:checked:border-blue-500 rounded cursor-pointer"
                                        checked />
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="shrink-0 w-10 h-10 rounded-full overflow-hidden">
                                            <img src="https://spacedev.ir/images/avatars/avatar.jpg"
                                                class="w-full h-full object-cover" alt="..." />
                                        </div>
                                        <div
                                            class="flex flex-col items-start whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                                            <span>جلال بهرامی راد</span>
                                            <span class="font-sans">bahramirad@example.com</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-zinc-400">
                                    فرانت اند دولوپر
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div
                                        class="flex items-center gap-3 text-green-500 before:inline-block before:w-1.5 before:h-1.5 before:bg-green-500 before:rounded-full before:ring before:ring-green-200 dark:before:ring-green-800">
                                        <span class="font-semibold text-xs">فعال</span>
                                    </div>
                                </td>
                                <td
                                    class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                                    مدیر
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <a href="#"
                                            class="inline-flex items-center gap-x-1 text-orange-500 hover:text-orange-400">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                viewBox="0 0 256 256" class="w-5 h-5">
                                                <path
                                                    d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z">
                                                </path>
                                            </svg>
                                            <span class="whitespace-nowrap font-semibold text-xs">دیدن
                                                پروفایل</span>
                                        </a>
                                        <span
                                            class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                                        <a href="#"
                                            class="inline-flex items-center gap-x-1 text-blue-500 hover:text-blue-400">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                viewBox="0 0 256 256" class="w-5 h-5">
                                                <path
                                                    d="M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31l83.67-83.66,3.48,13.9-36.8,36.79a8,8,0,0,0,11.31,11.32l40-40a8,8,0,0,0,2.11-7.6l-6.9-27.61L227.32,96A16,16,0,0,0,227.32,73.37ZM48,179.31,76.69,208H48Zm48,25.38L51.31,160,136,75.31,180.69,120Zm96-96L147.32,64l24-24L216,84.69Z">
                                                </path>
                                            </svg>
                                            <span class="whitespace-nowrap font-semibold text-xs">ویرایش</span>
                                        </a>
                                        <span
                                            class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                                        <button type="button"
                                            class="inline-flex items-center gap-x-1 text-red-500 hover:text-red-400">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                viewBox="0 0 256 256" class="w-5 h-5">
                                                <path
                                                    d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z">
                                                </path>
                                            </svg>
                                            <span class="whitespace-nowrap font-semibold text-xs">حذف</span>
                                        </button>
                                    </div>
                                </td>
                            </tr><!-- end table:row -->

                            <!-- table:row -->
                            <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-900">
                                <td class="px-3 py-4">
                                    <input type="checkbox"
                                        class="form-checkbox !ring-0 !ring-offset-0 bg-zinc-200 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-800 checked:!bg-blue-500 dark:checked:border-blue-500 rounded cursor-pointer"
                                        checked />
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="shrink-0 w-10 h-10 rounded-full overflow-hidden">
                                            <img src="https://i.pravatar.cc/150?img=31"
                                                class="w-full h-full object-cover" alt="..." />
                                        </div>
                                        <div
                                            class="flex flex-col items-start whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                                            <span>سارا تاجیک</span>
                                            <span class="font-sans">sara@example.com</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-zinc-400">
                                    طراح
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div
                                        class="flex items-center gap-3 text-green-500 before:inline-block before:w-1.5 before:h-1.5 before:bg-green-500 before:rounded-full before:ring before:ring-green-200 dark:before:ring-green-800">
                                        <span class="font-semibold text-xs">فعال</span>
                                    </div>
                                </td>
                                <td
                                    class="px-6 py-4 whitespace-nowrap font-semibold text-xs text-black dark:text-white">
                                    کارمند
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <a href="#"
                                            class="inline-flex items-center gap-x-1 text-orange-500 hover:text-orange-400">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                viewBox="0 0 256 256" class="w-5 h-5">
                                                <path
                                                    d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z">
                                                </path>
                                            </svg>
                                            <span class="whitespace-nowrap font-semibold text-xs">دیدن
                                                پروفایل</span>
                                        </a>
                                        <span
                                            class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                                        <a href="#"
                                            class="inline-flex items-center gap-x-1 text-blue-500 hover:text-blue-400">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                viewBox="0 0 256 256" class="w-5 h-5">
                                                <path
                                                    d="M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31l83.67-83.66,3.48,13.9-36.8,36.79a8,8,0,0,0,11.31,11.32l40-40a8,8,0,0,0,2.11-7.6l-6.9-27.61L227.32,96A16,16,0,0,0,227.32,73.37ZM48,179.31,76.69,208H48Zm48,25.38L51.31,160,136,75.31,180.69,120Zm96-96L147.32,64l24-24L216,84.69Z">
                                                </path>
                                            </svg>
                                            <span class="whitespace-nowrap font-semibold text-xs">ویرایش</span>
                                        </a>
                                        <span
                                            class="inline-block w-1.5 h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full mx-4"></span>
                                        <button type="button"
                                            class="inline-flex items-center gap-x-1 text-red-500 hover:text-red-400">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                viewBox="0 0 256 256" class="w-5 h-5">
                                                <path
                                                    d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z">
                                                </path>
                                            </svg>
                                            <span class="whitespace-nowrap font-semibold text-xs">حذف</span>
                                        </button>
                                    </div>
                                </td>
                            </tr><!-- end table:row -->
                        </tbody><!-- end table:tbody -->
                    </table><!-- end table -->
                </div><!-- end table container -->

                <!-- pagination -->
                <div class="flex flex-1 justify-between sm:hidden">
                    <a href="#"
                        class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white cursor-not-allowed transition-all active:scale-95 px-5">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                            class="w-5 h-5 ltr:rotate-180 me-2">
                            <path
                                d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z">
                            </path>
                        </svg>
                        <span class="font-semibold text-xs whitespace-nowrap">قبلی</span>
                    </a>

                    <a href="#"
                        class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white cursor-not-allowed transition-all active:scale-95 px-5">
                        <span class="font-semibold text-xs whitespace-nowrap">بعدی</span>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"
                            class="w-5 h-5 ltr:rotate-180 ms-2">
                            <path
                                d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z">
                            </path>
                        </svg>
                    </a>
                </div>
                <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                    <div>
                        <p class="font-semibold text-xs text-zinc-400">
                            نمایش
                            <span class="font-medium mx-1">۱</span>
                            تا
                            <span class="font-medium mx-1">۶</span>
                            از
                            <span class="font-medium mx-1">۴۵</span>
                            نتیجه
                        </p>
                    </div>
                    <nav class="ms-auto">
                        <ul class="flex items-center -space-x-px min-w-10 h-10 text-sm">
                            <li>
                                <a href="#"
                                    class="flex items-center justify-center min-w-10 h-10 bg-white dark:bg-black border border-e-0 border-zinc-200 dark:border-zinc-800 rounded-s-lg text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-900 hover:text-zinc-700 dark:hover:text-white px-3">
                                    <span class="sr-only">قبلی</span>
                                    <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M5 1 1 5l4 4" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="#" aria-current="page"
                                    class="flex items-center justify-center min-w-10 h-10 bg-blue-500 border border-zinc-200 dark:border-zinc-800 text-white px-3 z-10">۱</a>
                            </li>
                            <li>
                                <a href="#"
                                    class="flex items-center justify-center min-w-10 h-10 bg-white dark:bg-black border border-zinc-200 dark:border-zinc-800 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-900 hover:text-zinc-700 dark:hover:text-white px-3">۲</a>
                            </li>
                            <li>
                                <a href="#"
                                    class="flex items-center justify-center min-w-10 h-10 bg-white dark:bg-black border border-zinc-200 dark:border-zinc-800 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-900 hover:text-zinc-700 dark:hover:text-white px-3">۳</a>
                            </li>
                            <li>
                                <a href="#"
                                    class="flex items-center justify-center min-w-10 h-10 bg-white dark:bg-black border border-zinc-200 dark:border-zinc-800 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-900 hover:text-zinc-700 dark:hover:text-white px-3">۴</a>
                            </li>
                            <li>
                                <a href="#"
                                    class="flex items-center justify-center min-w-10 h-10 bg-white dark:bg-black border border-zinc-200 dark:border-zinc-800 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-900 hover:text-zinc-700 dark:hover:text-white px-3">۵</a>
                            </li>
                            <li>
                                <a href="#"
                                    class="flex items-center justify-center min-w-10 h-10 bg-white dark:bg-black border border-zinc-200 dark:border-zinc-800 rounded-e-lg text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-900 hover:text-zinc-700 dark:hover:text-white px-3">
                                    <span class="sr-only">بعدی</span>
                                    <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="m1 9 4-4-4-4" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div><!-- end pagination -->
            </div><!-- end page content -->
        </div>

        <!-- overlay -->
        <div class="fixed inset-0 bg-white/5 dark:bg-black/5 backdrop-blur-md transition-all z-40"
            x-bind:class="overlay ? 'opacity-100 visible' : 'opacity-0 invisible'"
            x-on:click="navigation = false;overlay = false">
        </div><!-- end overlay -->
    </div>
</body>

</html>