<!-- Main table container -->
<div class="relative w-full border rounded-lg overflow-auto">
    <!-- Table -->
    <table class="w-full caption-bottom">
        <!-- Table header -->
        <thead>
            <tr class="bg-muted border-b">
                <th class="whitespace-nowrap font-medium text-start text-xs text-muted-foreground align-middle p-3">
                    نام
                </th>
                <th class="whitespace-nowrap font-medium text-start text-xs text-muted-foreground align-middle p-3">
                    نقش
                </th>
                <th class="whitespace-nowrap font-medium text-start text-xs text-muted-foreground align-middle p-3">
                    وضعیت
                </th>
                <th class="whitespace-nowrap font-medium text-start text-xs text-muted-foreground align-middle p-3">
                    تاریخ عضویت
                </th>
                <th class="whitespace-nowrap font-medium text-start text-xs text-muted-foreground align-middle p-3">
                    اقدامات
                </th>
            </tr>
        </thead>
        <!-- end Table header -->

        <!-- Table body -->
        <tbody class="divide-y">
            <!-- Sample table row -->
            <tr class="even:bg-muted/45 hover:bg-muted/60">
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-1.5">
                        <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                            <img src="https://components.spacedev.ir/images/avatars/default.jpg" class="size-full object-cover" alt="..." />
                        </span>
                        <div class="grow flex flex-col items-start gap-y-1">
                            <span class="line-clamp-1 font-semibold text-xs">
                                جلال بهرامی راد
                            </span>
                            <span class="line-clamp-1 font-sans font-semibold text-2xs text-muted-foreground" dir="ltr">
                                example@example.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs">
                        مدیر سایت
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span
                        class="inline-flex items-center gap-x-1.5 bg-success/10 rounded-full text-success before:shrink-0 before:inline-block before:size-1.5 before:bg-success before:rounded-full before:ring-2 before:ring-success/40 py-1 px-3.5">
                        <span class="whitespace-nowrap font-semibold text-xs">فعال</span>
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs text-muted-foreground">
                        ۲۰ فروردین ۱۴۰۴
                    </span>
                </td>
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-2.5">
                        <a href="#" class="inline-flex items-center gap-x-0.5 text-info cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-px h-3 bg-border"></span>
                        <button type="button"
                            class="inline-flex items-center gap-x-0.5 text-destructive cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr>
            <!-- end Sample table row -->

            <!-- Sample table row -->
            <tr class="even:bg-muted/45 hover:bg-muted/60">
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-1.5">
                        <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                            <img src="https://components.spacedev.ir/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
                        </span>
                        <div class="grow flex flex-col items-start gap-y-1">
                            <span class="line-clamp-1 font-semibold text-xs">
                                نیکی فرهمند
                            </span>
                            <span class="line-clamp-1 font-sans font-semibold text-2xs text-muted-foreground" dir="ltr">
                                example@example.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs">
                        کاربر عادی
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span
                        class="inline-flex items-center gap-x-1.5 bg-success/10 rounded-full text-success before:shrink-0 before:inline-block before:size-1.5 before:bg-success before:rounded-full before:ring-2 before:ring-success/40 py-1 px-3.5">
                        <span class="whitespace-nowrap font-semibold text-xs">فعال</span>
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs text-muted-foreground">
                        ۲۵ فروردین ۱۴۰۴
                    </span>
                </td>
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-2.5">
                        <a href="#" class="inline-flex items-center gap-x-0.5 text-info cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-px h-3 bg-border"></span>
                        <button type="button"
                            class="inline-flex items-center gap-x-0.5 text-destructive cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr>
            <!-- end Sample table row -->

            <!-- Sample table row -->
            <tr class="even:bg-muted/45 hover:bg-muted/60">
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-1.5">
                        <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                            <img src="https://components.spacedev.ir/images/avatars/02.jpg" class="size-full object-cover" alt="..." />
                        </span>
                        <div class="grow flex flex-col items-start gap-y-1">
                            <span class="line-clamp-1 font-semibold text-xs">
                                پرهام آذری
                            </span>
                            <span class="line-clamp-1 font-sans font-semibold text-2xs text-muted-foreground" dir="ltr">
                                example@example.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs">
                        کاربر عادی
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span
                        class="inline-flex items-center gap-x-1.5 bg-warning/10 rounded-full text-warning before:shrink-0 before:inline-block before:size-1.5 before:bg-warning before:rounded-full before:ring-2 before:ring-warning/40 py-1 px-3.5">
                        <span class="whitespace-nowrap font-semibold text-xs">غیر فعال</span>
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs text-muted-foreground">
                        ۲۶ فروردین ۱۴۰۴
                    </span>
                </td>
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-2.5">
                        <a href="#" class="inline-flex items-center gap-x-0.5 text-info cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-px h-3 bg-border"></span>
                        <button type="button"
                            class="inline-flex items-center gap-x-0.5 text-destructive cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr>
            <!-- end Sample table row -->

            <!-- Sample table row -->
            <tr class="even:bg-muted/45 hover:bg-muted/60">
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-1.5">
                        <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                            <img src="https://components.spacedev.ir/images/avatars/03.jpg" class="size-full object-cover" alt="..." />
                        </span>
                        <div class="grow flex flex-col items-start gap-y-1">
                            <span class="line-clamp-1 font-semibold text-xs">
                                رادوین فربد
                            </span>
                            <span class="line-clamp-1 font-sans font-semibold text-2xs text-muted-foreground" dir="ltr">
                                example@example.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs">
                        کاربر عادی
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span
                        class="inline-flex items-center gap-x-1.5 bg-success/10 rounded-full text-success before:shrink-0 before:inline-block before:size-1.5 before:bg-success before:rounded-full before:ring-2 before:ring-success/40 py-1 px-3.5">
                        <span class="whitespace-nowrap font-semibold text-xs">فعال</span>
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs text-muted-foreground">
                        ۲۸ فروردین ۱۴۰۴
                    </span>
                </td>
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-2.5">
                        <a href="#" class="inline-flex items-center gap-x-0.5 text-info cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-px h-3 bg-border"></span>
                        <button type="button"
                            class="inline-flex items-center gap-x-0.5 text-destructive cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr>
            <!-- end Sample table row -->

            <!-- Sample table row -->
            <tr class="even:bg-muted/45 hover:bg-muted/60">
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-1.5">
                        <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                            <img src="https://components.spacedev.ir/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
                        </span>
                        <div class="grow flex flex-col items-start gap-y-1">
                            <span class="line-clamp-1 font-semibold text-xs">
                                ساینا مهرگان
                            </span>
                            <span class="line-clamp-1 font-sans font-semibold text-2xs text-muted-foreground" dir="ltr">
                                example@example.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs">
                        کاربر عادی
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span
                        class="inline-flex items-center gap-x-1.5 bg-success/10 rounded-full text-success before:shrink-0 before:inline-block before:size-1.5 before:bg-success before:rounded-full before:ring-2 before:ring-success/40 py-1 px-3.5">
                        <span class="whitespace-nowrap font-semibold text-xs">فعال</span>
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs text-muted-foreground">
                        ۳۰ فروردین ۱۴۰۴
                    </span>
                </td>
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-2.5">
                        <a href="#" class="inline-flex items-center gap-x-0.5 text-info cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-px h-3 bg-border"></span>
                        <button type="button"
                            class="inline-flex items-center gap-x-0.5 text-destructive cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr>
            <!-- end Sample table row -->

            <!-- Sample table row -->
            <tr class="even:bg-muted/45 hover:bg-muted/60">
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-1.5">
                        <span class="shrink-0 inline-block sm:size-10 size-8 rounded-full overflow-hidden">
                            <img src="https://components.spacedev.ir/images/avatars/05.jpg" class="size-full object-cover" alt="..." />
                        </span>
                        <div class="grow flex flex-col items-start gap-y-1">
                            <span class="line-clamp-1 font-semibold text-xs">
                                آریا پارسا
                            </span>
                            <span class="line-clamp-1 font-sans font-semibold text-2xs text-muted-foreground" dir="ltr">
                                example@example.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs">
                        کاربر عادی
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span
                        class="inline-flex items-center gap-x-1.5 bg-destructive/10 rounded-full text-destructive before:shrink-0 before:inline-block before:size-1.5 before:bg-destructive before:rounded-full before:ring-2 before:ring-destructive/40 py-1 px-3.5">
                        <span class="whitespace-nowrap font-semibold text-xs">مسدود</span>
                    </span>
                </td>
                <td class="px-3 py-4">
                    <span class="whitespace-nowrap font-medium text-xs text-muted-foreground">
                        ۰۳ اردیبهشت ۱۴۰۴
                    </span>
                </td>
                <td class="px-3 py-4">
                    <div class="flex items-center gap-x-2.5">
                        <a href="#" class="inline-flex items-center gap-x-0.5 text-info cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">ویرایش</span>
                        </a>
                        <span class="inline-block w-px h-3 bg-border"></span>
                        <button type="button"
                            class="inline-flex items-center gap-x-0.5 text-destructive cursor-pointer">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path fill-rule="evenodd"
                                    d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="whitespace-nowrap font-medium text-xs">حذف</span>
                        </button>
                    </div>
                </td>
            </tr>
            <!-- end Sample table row -->
        </tbody>
        <!-- end Table body -->
    </table>
    <!-- end Table -->
</div>
<!-- end Main table container -->