Tailwind CSS Content Tables Blocks

Content Tables

Posts, reviews, and moderation tables for CMS dashboards, ecommerce back offices, and content operations.

Post Management Table Pro

Post rows keep titles, authors, states, and publish details aligned in a CMS-style table.

<div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                      <div class="min-w-full">
                        
                        <table class="min-w-full">
                          <thead>
                            <tr class="border-b border-table-line">
                              <th scope="col" class="min-w-100">
                                <span class="pb-3 block text-start font-normal text-xs uppercase text-muted-foreground-1">
                                  Title
                                </span>
                              </th>

<th scope="col" class="min-w-30">
                                <span class="pb-3 block text-start font-normal text-xs uppercase text-muted-foreground-1">
                                  Sends
                                </span>
                              </th>

<th scope="col" class="min-w-30">
                                <span class="pb-3 block text-start font-normal text-xs uppercase text-muted-foreground-1">
                                  Opens
                                </span>
                              </th>

<th scope="col" class="min-w-48">
                                <span class="pb-3 block text-start font-normal text-xs uppercase text-muted-foreground-1">
                                  Status
                                </span>
                              </th>

<tbody class="divide-y divide-table-line">
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="relative w-20 h-15 shrink-0 bg-surface rounded-md">
                                    <img class="absolute inset-0 size-full object-cover rounded-md" src="https://images.unsplash.com/photo-1673767296837-8106e1b94d34?q=80&w=160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      Video marketing best practices
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Lisa Anderson
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 11, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  5,678
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  94%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-surface text-surface-foreground rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  Published
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="relative w-20 h-15 shrink-0 bg-surface rounded-md">
                                    <img class="absolute inset-0 size-full object-cover rounded-md" src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?q=80&w=160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      Growth hacking techniques
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Daniel Park
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 10, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  4,123
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  86%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-surface text-surface-foreground rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  Published
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="relative w-20 h-15 shrink-0 bg-surface rounded-md">
                                    <img class="absolute inset-0 size-full object-cover rounded-md" src="https://images.unsplash.com/photo-1718241905696-cb34c2c07bed?q=80&w=160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      AI-powered content generation
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Alex Morgan
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 14, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  3,567
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  89%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-surface text-surface-foreground rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  Published
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="relative w-20 h-15 shrink-0 bg-surface rounded-md">
                                    <img class="absolute inset-0 size-full object-cover rounded-md" src="https://images.unsplash.com/photo-1456324504439-367cee3b3c32?q=80&w=160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      10 Tips for writing engaging blog posts
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Jane Smith
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 24, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  2,345
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  78%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-surface text-surface-foreground rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  Published
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="flex shrink-0 justify-center items-center w-20 h-15 bg-surface-1 text-muted-foreground-1 rounded-md">
                                    <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      The ultimate guide to seo optimization
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Mike Johnson
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 23, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  3,891
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  85%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-orange-100 text-orange-800 rounded-full dark:bg-orange-500/10 dark:text-orange-500">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/><path d="m15 5 3 3"/></svg>
                                  Draft
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="relative w-20 h-15 shrink-0 bg-surface rounded-md">
                                    <img class="absolute inset-0 size-full object-cover rounded-md" src="https://images.unsplash.com/photo-1611926653458-09294b3142bf?q=80&w=160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      Social media marketing strategies
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Sarah Wilson
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 22, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  1,876
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  91%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-primary-100 text-primary-700 rounded-full dark:bg-primary-700/20 dark:text-primary-400">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><path d="M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8"/><path d="M3 10h18"/><path d="m16 20 2 2 4-4"/></svg>
                                  Scheduled
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="relative w-20 h-15 shrink-0 bg-surface rounded-md">
                                    <img class="absolute inset-0 size-full object-cover rounded-md" src="https://images.unsplash.com/photo-1621184078903-6bfe9482d935?q=80&w=160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      Content marketing best practices
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          David Brown
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 21, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  4,562
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  88%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-surface text-surface-foreground rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  Published
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="relative w-20 h-15 shrink-0 bg-surface rounded-md">
                                    <img class="absolute inset-0 size-full object-cover rounded-md" src="https://images.unsplash.com/photo-1607703703520-bb638e84caf2?q=80&w=160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      Advanced analytics dashboard setup
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Robert Chen
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 19, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  3,456
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  82%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-surface text-surface-foreground rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  Published
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="flex shrink-0 justify-center items-center w-20 h-15 bg-surface-1 text-muted-foreground-1 rounded-md">
                                    <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      Customer journey mapping techniques
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Emily Parker
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 18, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  2,789
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  75%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-primary-100 text-primary-700 rounded-full dark:bg-primary-700/20 dark:text-primary-400">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><path d="M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8"/><path d="M3 10h18"/><path d="m16 20 2 2 4-4"/></svg>
                                  Scheduled
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="relative w-20 h-15 shrink-0 bg-surface rounded-md">
                                    <img class="absolute inset-0 size-full object-cover rounded-md" src="https://images.unsplash.com/photo-1673515336163-e988e60d099b?q=80&w=160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      Conversion rate optimization tips
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          James Wilson
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 17, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  4,123
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  88%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-orange-100 text-orange-800 rounded-full dark:bg-orange-500/10 dark:text-orange-500">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/><path d="m15 5 3 3"/></svg>
                                  Draft
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="relative w-20 h-15 shrink-0 bg-surface rounded-md">
                                    <img class="absolute inset-0 size-full object-cover rounded-md" src="https://images.unsplash.com/photo-1576153192621-7a3be10b356e?q=80&w=160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      Mobile-first design principles
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Sophia Martinez
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 16, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  3,678
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  91%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-surface text-surface-foreground rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  Published
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                            <tr>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="flex shrink-0 justify-center items-center w-20 h-15 bg-surface-1 text-muted-foreground-1 rounded-md">
                                    <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
                                  </span>
                                  <div class="grow">
                                    <a class="font-medium text-surface-foreground underline-offset-2 hover:underline hover:decoration-2 hover:text-primary-hover focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                      Email marketing automation guide
                                    </a>
                                    <ul class="mt-1 flex flex-wrap items-center whitespace-nowrap gap-1.5">
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          By
                                        </p>
                                        <a class="ms-1 font-medium text-xs text-muted-foreground-1 hover:text-primary-hover hover:underline hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 focus:text-primary" href="#">
                                          Rachel Kim
                                        </a>
                                      </li>
                                      <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        <p class="text-xs text-muted-foreground-1">
                                          Mar 13, 2025
                                        </p>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  4,892
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <span class="text-sm text-foreground">
                                  92%
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <div class="inline-flex items-center gap-x-1.5 py-1 px-2 text-[13px] bg-surface text-surface-foreground rounded-full">
                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  Published
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3">
                                <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Details
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        
                      </div>
                    </div>

Open related CMS posts page

Review Moderation Table Pro

Review rows combine ratings, product details, and moderation actions in a wide feedback table.

<div class="p-5 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="pb-4 flex flex-wrap justify-between sm:grid sm:grid-cols-2 gap-3 sm:gap-5 border-b border-card-header">
    <div>
      
      <div class="relative">
        <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5">
          <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
        </div>
        <input type="text" class="py-1.5 sm:py-2 ps-10 pe-8 block w-full min-w-75 bg-surface border-surface-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:bg-layer focus:border-primary-focus focus:ring-primary-focus checked:border-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search reviews">
        <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
          <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
            <span class="sr-only">Close</span>
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
          </button>
        </div>
      </div>
      
    </div>

<div class="flex justify-end items-center gap-x-2">
      
      <div class="hs-dropdown [--auto-close:inside] sm:[--placement:bottom-right] relative inline-flex">
        
        <button id="hs-pro-dupfind" type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></svg>
          Filter
          <span class="font-medium text-[10px] py-0.5 px-2 bg-secondary text-secondary-foreground leading-3 rounded-full">
            1
          </span>
        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupfind">
          <div class="p-1">
            <div class="flex items-center gap-x-3 py-1.5 px-2 cursor-pointer rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dupfindch1" checked>
              <label for="hs-pro-dupfindch1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-foreground">
                All
              </label>
            </div>

<div class="flex items-center gap-x-3 py-1.5 px-2 cursor-pointer rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dupfindch2">
              <label for="hs-pro-dupfindch2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-foreground">
                Published
              </label>
            </div>

<div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
    <div class="min-w-full inline-block align-middle">
      
      <table class="min-w-full divide-y divide-table-line">
        <thead>
          <tr>
            <th scope="col" class="px-3 text-start">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </th>

<th scope="col" class="min-w-62.5">
              
              <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                <button id="hs-pro-eptprs" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  Product
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptprs">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<th scope="col" class="min-w-57.5">
              
              <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                <button id="hs-pro-eptrrs" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  Reviewer
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptrrs">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<th scope="col" class="min-w-[350px] ">
              
              <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                <button id="hs-pro-eptrws" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  Review
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptrws">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptdts">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<th scope="col">
              
              <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                <button id="hs-pro-eptsts" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  Status
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptsts">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<tbody class="divide-y divide-table-line">
          <tr>
            <td class="size-px whitespace-nowrap px-3 pt-6 pb-4 align-top">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex items-center gap-x-3">
                <img class="shrink-0 size-10 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                    Mango Women's shoe
                  </a>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex gap-x-3">
                <img class="shrink-0 size-9.5 rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                <div class="grow">
                  <span class="block text-sm font-medium text-foreground">
                    Amanda Harvey
                  </span>
                  <span class="block text-sm text-muted-foreground-1">
                    christina@site.com
                  </span>
                  <p class="mt-2 inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
                    Verified customer
                  </p>
                </div>
              </div>
            </td>
            <td class="size-px p-6 align-top">
              <div class="flex gap-1 mb-2">
                <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1603213060868-fc57c78f4c84?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1516762689617-e1cffcef479d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
              </div>
              <div class="flex gap-x-0.5 mb-1.5">
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
              </div>
              <span class="block text-sm font-semibold text-foreground">Good product</span>
              <span class="block text-sm text-muted-foreground-1">A really well built shoe. It looks great and wears just as well. A great staple in ball caps.</span>
              <div class="mt-3 flex gap-x-2">
                <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 10 20 15 15 20"/><path d="M4 4v7a4 4 0 0 0 4 4h12"/></svg>
                <div class="grow">
                  <p class="font-medium text-sm text-foreground">You replied with</p>
                  <blockquote class="px-3 border-s-2 border-line-3 text-sm text-muted-foreground-1">
                    That is so great to hear. We really try our best. 😊 Thank you for choosing our product.
                  </blockquote>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="text-sm text-muted-foreground-2">
                10 Aug 2023
              </span>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="py-1 ps-1.5 pe-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Published
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 pt-5 pb-1 align-top">
              
              <div class="flex justify-end items-center -space-x-px">
                <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                  Reply
                </button>
                <div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-right] first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line shadow-2xs hover:bg-layer-hover">
                  <button id="hs-pro-ertmd1" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ertmd1">
                    <div class="p-1">
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Publish
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Unpublish
                      </button>

<button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Delete
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              
            </td>
          </tr>

<tr>
            <td class="size-px whitespace-nowrap px-3 pt-6 pb-4 align-top">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex items-center gap-x-3">
                <img class="shrink-0 size-10 rounded-md" src="https://images.unsplash.com/photo-1549298916-f52d724204b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                    Nike Air Jordan 1 Yellow
                  </a>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex items-center gap-x-3">
                <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                  Rd
                </span>
                <div class="grow">
                  <span class="block text-sm font-medium text-foreground">
                    Rachel Doe
                  </span>
                  <span class="block text-sm text-muted-foreground-1">
                    rach@site.com
                  </span>
                </div>
              </div>
            </td>
            <td class="size-px p-6 align-top">
              <div class="flex gap-x-0.5 mb-1.5">
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
              </div>
              <span class="block text-sm font-semibold text-foreground">I just love it!</span>
              <span class="block text-sm text-muted-foreground-1">I bought this shoe for my friend as a gift, but then i found out she cheated on me with my boyfriend so I kept it and I love it!! I wear it all the time and there is no problem.</span>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="text-sm text-muted-foreground-2">
                10 Aug 2023
              </span>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="py-1 ps-1.5 pe-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Published
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 pt-5 pb-1 align-top">
              
              <div class="flex justify-end items-center -space-x-px">
                <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                  Reply
                </button>
                <div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-right] first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line shadow-2xs hover:bg-layer-hover">
                  <button id="hs-pro-ertmd2" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ertmd2">
                    <div class="p-1">
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Publish
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Unpublish
                      </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 pt-6 pb-4 align-top">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex items-center gap-x-3">
                <img class="shrink-0 size-10 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                    Mango Women's shoe
                  </a>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex gap-x-3">
                <img class="shrink-0 size-9.5 rounded-full" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                <div class="grow">
                  <span class="block text-sm font-medium text-foreground">
                    Ella Lauda
                  </span>
                  <span class="block text-sm text-muted-foreground-1">
                    ellauda@site.com
                  </span>
                  <p class="mt-2 inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
                    Verified customer
                  </p>
                </div>
              </div>
            </td>
            <td class="size-px p-6 align-top">
              <div class="flex gap-1 mb-2">
                <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1479492591199-eb2492814e73?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1542840411-4275cdfe7782?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
              </div>
              <div class="flex gap-x-0.5 mb-1.5">
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
              </div>
              <span class="block text-sm font-semibold text-foreground">Buy the product, you will not regret it!</span>
              <span class="block text-sm text-muted-foreground-1">Don't let this merchandise get away! It's a must buy and you will look good in it while hiking.</span>
              <div class="mt-3 flex gap-x-2">
                <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 10 20 15 15 20"/><path d="M4 4v7a4 4 0 0 0 4 4h12"/></svg>
                <div class="grow">
                  <p class="font-medium text-sm text-foreground">You replied with</p>
                  <blockquote class="px-3 border-s-2 border-line-3 text-sm text-muted-foreground-1">
                    Awww, thank you! 😍
                  </blockquote>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="text-sm text-muted-foreground-2">
                8 Aug 2023
              </span>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="py-1 ps-1.5 pe-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Published
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 pt-5 pb-1 align-top">
              
              <div class="flex justify-end items-center -space-x-px">
                <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                  Reply
                </button>
                <div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-right] first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line shadow-2xs hover:bg-layer-hover">
                  <button id="hs-pro-ertmd3" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ertmd3">
                    <div class="p-1">
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Publish
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Unpublish
                      </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 pt-6 pb-4 align-top">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex items-center gap-x-3">
                <img class="shrink-0 size-10 rounded-md" src="https://images.unsplash.com/photo-1611911813383-67769b37a149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                    Pattern Winter Sweater
                  </a>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex gap-x-3">
                <img class="shrink-0 size-9.5 rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                <div class="grow">
                  <span class="block text-sm font-medium text-foreground">
                    Costa Quinn
                  </span>
                  <span class="block text-sm text-muted-foreground-1">
                    costa@site.com
                  </span>
                  <p class="mt-2 inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
                    Verified customer
                  </p>
                </div>
              </div>
            </td>
            <td class="size-px p-6 align-top">
              <div class="flex gap-x-0.5 mb-1.5">
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
              </div>
              <span class="block text-sm font-semibold text-foreground">Really nice</span>
              <span class="block text-sm text-muted-foreground-1">I bought this for my wife. Material is great and very comfortable and stylish.</span>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="text-sm text-muted-foreground-2">
                4 Aug 2023
              </span>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="py-1 ps-1.5 pe-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium bg-surface-1 text-surface-foreground rounded-full">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                On hold
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 pt-5 pb-1 align-top">
              
              <div class="flex justify-end items-center -space-x-px">
                <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                  Reply
                </button>
                <div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-right] first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line shadow-2xs hover:bg-layer-hover">
                  <button id="hs-pro-ertmd4" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ertmd4">
                    <div class="p-1">
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Publish
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Unpublish
                      </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 pt-6 pb-4 align-top">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex items-center gap-x-3">
                <img class="shrink-0 size-10 rounded-md" src="https://images.unsplash.com/photo-1613852348851-df1739db8201?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                    Calvin Klein T-shirts
                  </a>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <div class="w-full flex items-center gap-x-3">
                <span class="flex shrink-0 justify-center items-center size-9.5 bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full">
                  Fh
                </span>
                <div class="grow">
                  <span class="block text-sm font-medium text-foreground">
                    Finch Hoot
                  </span>
                  <span class="block text-sm text-muted-foreground-1">
                    finch@site.com
                  </span>
                </div>
              </div>
            </td>
            <td class="size-px p-6 align-top">
              <div class="flex gap-x-0.5 mb-1.5">
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
                <svg class="shrink-0 size-3 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                </svg>
              </div>
              <span class="block text-sm font-semibold text-foreground">It's ok</span>
              <span class="block text-sm text-muted-foreground-1">The material is ok. Nothing premium looking. I guess I expected more for its price.</span>
              <div class="mt-3 flex gap-x-2">
                <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 10 20 15 15 20"/><path d="M4 4v7a4 4 0 0 0 4 4h12"/></svg>
                <div class="grow">
                  <p class="font-medium text-sm text-foreground">You replied with</p>
                  <blockquote class="px-3 border-s-2 border-line-3 text-sm text-muted-foreground-1">
                    We're sorry to hear that. We know we are not perfect. Is there anything we can do to help you smoothen your experience?
                  </blockquote>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="text-sm text-muted-foreground-2">
                4 Aug 2023
              </span>
            </td>
            <td class="size-px whitespace-nowrap p-6 align-top">
              <span class="py-1 ps-1.5 pe-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium bg-surface-1 text-surface-foreground rounded-full">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                On hold
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 pt-5 pb-1 align-top">
              
              <div class="flex justify-end items-center -space-x-px">
                <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                  Reply
                </button>
                <div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-right] first:rounded-s-lg last:rounded-e-lg bg-layer border border-layer-line shadow-2xs hover:bg-layer-hover">
                  <button id="hs-pro-ertmd5" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ertmd5">
                    <div class="p-1">
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Publish
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                        Unpublish
                      </button>

<div class="flex flex-wrap justify-between items-center gap-2">
  
    
    <div class="relative inline-block">
      <select data-hs-select='{
          "placeholder": "Select option...",
          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus",
          "dropdownClasses": "mt-2 z-50 w-16 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
          "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
        }' class="hidden">
        <option value="">Choose</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option selected>5</option>
        <option>6</option>
        <option>7</option>
      </select>
    </div>
    
  
    
    <nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
      <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
        <span class="sr-only">Previous</span>
      </button>
      <div class="flex items-center gap-x-1">
        <span class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface text-surface-foreground py-2 px-3 text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</span>
        <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
        <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
      </div>
      <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
        <span class="sr-only">Next</span>
        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
      </button>
    </nav>
    
  </div>
  
</div>

Product Review Table Free

A dense review table mixes product cells, star ratings, reviewer info, and status controls.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  
  <div class="flex flex-col">
    <div class="-m-1.5 overflow-x-auto">
      <div class="p-1.5 min-w-full inline-block align-middle">
        <div class="bg-layer border border-layer-line rounded-xl shadow-2xs overflow-hidden">
          
          <div class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-b border-table-line">
            
            <div class="sm:col-span-1">
              <label for="hs-as-table-product-review-search" class="sr-only">Search</label>
              <div class="relative">
                <input type="text" id="hs-as-table-product-review-search" name="hs-as-table-product-review-search" class="py-2 px-3 ps-11 block w-full bg-layer border-layer-line rounded-lg text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search">
                <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-4">
                  <svg class="shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                </div>
              </div>
            </div>

<div class="sm:col-span-2 md:grow">
              <div class="flex justify-end gap-x-2">
                <div class="hs-dropdown [--placement:bottom-right] relative inline-block">
                  <button id="hs-as-table-table-export-dropdown" type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                    Export
                  </button>
                  <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-48 z-10 bg-dropdown border border-dropdown-line divide-y divide-dropdown-divider shadow-md rounded-lg p-2 mt-2" role="menu" aria-orientation="vertical" aria-labelledby="hs-as-table-table-export-dropdown">
                    <div class="py-2 first:pt-0 last:pb-0">
                      <span class="block py-2 px-3 text-xs font-medium uppercase text-muted-foreground">
                        Options
                      </span>
                      <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
                        Copy
                      </a>
                      <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
                        Print
                      </a>
                    </div>
                    <div class="py-2 first:pt-0 last:pb-0">
                      <span class="block py-2 px-3 text-xs font-medium uppercase text-muted-foreground">
                        Download options
                      </span>
                      <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path d="M5.884 6.68a.5.5 0 1 0-.768.64L7.349 10l-2.233 2.68a.5.5 0 0 0 .768.64L8 10.781l2.116 2.54a.5.5 0 0 0 .768-.641L8.651 10l2.233-2.68a.5.5 0 0 0-.768-.64L8 9.219l-2.116-2.54z"/>
                          <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
                        </svg>
                        Excel
                      </a>
                      <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.517 14.841a1.13 1.13 0 0 0 .401.823c.13.108.289.192.478.252.19.061.411.091.665.091.338 0 .624-.053.859-.158.236-.105.416-.252.539-.44.125-.189.187-.408.187-.656 0-.224-.045-.41-.134-.56a1.001 1.001 0 0 0-.375-.357 2.027 2.027 0 0 0-.566-.21l-.621-.144a.97.97 0 0 1-.404-.176.37.37 0 0 1-.144-.299c0-.156.062-.284.185-.384.125-.101.296-.152.512-.152.143 0 .266.023.37.068a.624.624 0 0 1 .246.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.2-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.551.05-.776.15-.225.099-.4.24-.527.421-.127.182-.19.395-.19.639 0 .201.04.376.122.524.082.149.2.27.352.367.152.095.332.167.539.213l.618.144c.207.049.361.113.463.193a.387.387 0 0 1 .152.326.505.505 0 0 1-.085.29.559.559 0 0 1-.255.193c-.111.047-.249.07-.413.07-.117 0-.223-.013-.32-.04a.838.838 0 0 1-.248-.115.578.578 0 0 1-.255-.384h-.765ZM.806 13.693c0-.248.034-.46.102-.633a.868.868 0 0 1 .302-.399.814.814 0 0 1 .475-.137c.15 0 .283.032.398.097a.7.7 0 0 1 .272.26.85.85 0 0 1 .12.381h.765v-.072a1.33 1.33 0 0 0-.466-.964 1.441 1.441 0 0 0-.489-.272 1.838 1.838 0 0 0-.606-.097c-.356 0-.66.074-.911.223-.25.148-.44.359-.572.632-.13.274-.196.6-.196.979v.498c0 .379.064.704.193.976.131.271.322.48.572.626.25.145.554.217.914.217.293 0 .554-.055.785-.164.23-.11.414-.26.55-.454a1.27 1.27 0 0 0 .226-.674v-.076h-.764a.799.799 0 0 1-.118.363.7.7 0 0 1-.272.25.874.874 0 0 1-.401.087.845.845 0 0 1-.478-.132.833.833 0 0 1-.299-.392 1.699 1.699 0 0 1-.102-.627v-.495Zm8.239 2.238h-.953l-1.338-3.999h.917l.896 3.138h.038l.888-3.138h.879l-1.327 4Z"/>
                        </svg>
                        .CSV
                      </a>
                      <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
                          <path d="M4.603 14.087a.81.81 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.68 7.68 0 0 1 1.482-.645 19.697 19.697 0 0 0 1.062-2.227 7.269 7.269 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.188-.012.396-.047.614-.084.51-.27 1.134-.52 1.794a10.954 10.954 0 0 0 .98 1.686 5.753 5.753 0 0 1 1.334.05c.364.066.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.856.856 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.712 5.712 0 0 1-.911-.95 11.651 11.651 0 0 0-1.997.406 11.307 11.307 0 0 1-1.02 1.51c-.292.35-.609.656-.927.787a.793.793 0 0 1-.58.029zm1.379-1.901c-.166.076-.32.156-.459.238-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361.01.022.02.036.026.044a.266.266 0 0 0 .035-.012c.137-.056.355-.235.635-.572a8.18 8.18 0 0 0 .45-.606zm1.64-1.33a12.71 12.71 0 0 1 1.01-.193 11.744 11.744 0 0 1-.51-.858 20.801 20.801 0 0 1-.5 1.05zm2.446.45c.15.163.296.3.435.41.24.19.407.253.498.256a.107.107 0 0 0 .07-.015.307.307 0 0 0 .094-.125.436.436 0 0 0 .059-.2.095.095 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a3.876 3.876 0 0 0-.612-.053zM8.078 7.8a6.7 6.7 0 0 0 .2-.828c.031-.188.043-.343.038-.465a.613.613 0 0 0-.032-.198.517.517 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822.024.111.054.227.09.346z"/>
                        </svg>
                        .PDF
                      </a>
                    </div>
                  </div>
                </div>

<div class="hs-dropdown [--placement:bottom-right] relative inline-block" data-hs-dropdown-auto-close="inside">
                  <button id="hs-as-table-table-filter-dropdown" type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M7 12h10"/><path d="M10 18h4"/></svg>
                    Filter
                    <span class="ps-2 text-xs font-semibold text-primary border-s border-line-2">
                      1
                    </span>
                  </button>
                  <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-48 z-10 bg-dropdown border border-dropdown-line divide-y divide-dropdown-divider shadow-md rounded-lg mt-2" role="menu" aria-orientation="vertical" aria-labelledby="hs-as-table-table-filter-dropdown">
                    <div class="divide-y divide-dropdown-divider">
                      <label for="hs-as-filters-dropdown-all" class="flex items-center py-2.5 px-3">
                        <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-as-filters-dropdown-all" checked>
                        <span class="ms-3 text-sm text-foreground">All</span>
                      </label>
                      <label for="hs-as-filters-dropdown-published" class="flex items-center py-2.5 px-3">
                        <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-as-filters-dropdown-published">
                        <span class="ms-3 text-sm text-foreground">Published</span>
                      </label>
                      <label for="hs-as-filters-dropdown-pending" class="flex items-center py-2.5 px-3">
                        <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-as-filters-dropdown-pending">
                        <span class="ms-3 text-sm text-foreground">Pending</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

<table class="min-w-full divide-y divide-table-line">
            <thead class="bg-muted">
              <tr>
                <th scope="col" class="px-6 py-3 text-start">
                  <div class="flex items-center gap-x-2">
                    <span class="text-xs font-semibold uppercase text-foreground">
                      Product
                    </span>
                  </div>
                </th>
                
                <th scope="col" class="px-6 py-3 text-start">
                  <div class="flex items-center gap-x-2">
                    <span class="text-xs font-semibold uppercase text-foreground">
                      Reviewer
                    </span>
                  </div>
                </th>
                
                <th scope="col" class="px-6 py-3 text-start">
                  <div class="flex items-center gap-x-2">
                    <span class="text-xs font-semibold uppercase text-foreground">
                      Review
                    </span>
                  </div>
                </th>
                
                <th scope="col" class="px-6 py-3 text-start">
                  <div class="flex items-center gap-x-2">
                    <span class="text-xs font-semibold uppercase text-foreground">
                      Date
                    </span>
                  </div>
                </th>
                
                <th scope="col" class="px-6 py-3 text-start">
                  <div class="flex items-center gap-x-2">
                    <span class="text-xs font-semibold uppercase text-foreground">
                      Status
                    </span>
                  </div>
                </th>
              </tr>
            </thead>
            
            <tbody class="divide-y divide-table-line">
              <tr class="bg-layer hover:bg-layer-hover">
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-4">
                      <img class="shrink-0 size-9.5 rounded-lg" src="https://images.unsplash.com/photo-1572307480813-ceb0e59d8325?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                      <div>
                        <span class="block text-sm font-semibold text-foreground">Brown Hat</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-3">
                      <img class="inline-block size-9.5 rounded-full" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Product Image">
                      <div class="grow">
                        <span class="block text-sm font-semibold text-foreground">Christina Bersh</span>
                        <span class="block text-sm text-muted-foreground-1">christina@site.com</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="h-px w-72 min-w-72 align-top">
                  <a class="block p-6" href="#">
                    <div class="flex gap-x-1 mb-2">
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                    </div>
                    <span class="block text-sm font-semibold text-foreground">I just love it!</span>
                    <span class="block text-sm text-muted-foreground-1">I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a mens" hat.</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="text-sm text-muted-foreground-2">10 Jan 2022</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
                      <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                      </svg>
                      Published
                    </span>
                  </a>
                </td>
              </tr>

<tr class="bg-layer hover:bg-layer-hover">
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-4">
                      <img class="shrink-0 size-9.5 rounded-lg" src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                      <div>
                        <span class="block text-sm font-semibold text-foreground">Calvin Klein T-shirts</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-3">
                      <img class="inline-block size-9.5 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Product Image">
                      <div class="grow">
                        <span class="block text-sm font-semibold text-foreground">David Harrison</span>
                        <span class="block text-sm text-muted-foreground-1">david@site.com</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="h-px w-72 min-w-72 align-top">
                  <a class="block p-6" href="#">
                    <div class="flex gap-x-1 mb-2">
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                    </div>
                    <span class="block text-sm font-semibold text-foreground">Really nice</span>
                    <span class="block text-sm text-muted-foreground-1">Material is great and very comfortable and stylish.</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="text-sm text-muted-foreground-2">04 Aug 2020</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
                      <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
                      </svg>
                      Rejected
                    </span>
                  </a>
                </td>
              </tr>
              
              <tr class="bg-layer hover:bg-layer-hover">
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-4">
                      <img class="shrink-0 size-9.5 rounded-lg" src="https://images.unsplash.com/photo-1626947346165-4c2288dadc2a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                      <div>
                        <span class="block text-sm font-semibold text-foreground">Clarks shoes</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-3">
                      <span class="inline-flex items-center justify-center size-9.5 rounded-full bg-surface-2">
                        <span class="font-medium text-foreground">A</span>
                      </span>
                      <div class="grow">
                        <span class="block text-sm font-semibold text-foreground">Anne Richard</span>
                        <span class="block text-sm text-muted-foreground-1">anne@site.com</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="h-px w-72 min-w-72 align-top">
                  <a class="block p-6" href="#">
                    <div class="flex gap-x-1 mb-2">
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                    </div>
                    <span class="block text-sm font-semibold text-foreground">Good product</span>
                    <span class="block text-sm text-muted-foreground-1">A really well built shoe. It looks great and wears just as well. A great staple in ball caps.</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="text-sm text-muted-foreground-2">June 18 2022</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
                      <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                      </svg>
                      Published
                    </span>
                  </a>
                </td>
              </tr>
              
              <tr class="bg-layer hover:bg-layer-hover">
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-4">
                      <img class="shrink-0 size-9.5 rounded-lg" src="https://images.unsplash.com/photo-1598554747436-c9293d6a588f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                      <div>
                        <span class="block text-sm font-semibold text-foreground">Levis women's jeans</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-3">
                      <img class="inline-block size-9.5 rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80" alt="Product Image">
                      <div class="grow">
                        <span class="block text-sm font-semibold text-foreground">Samia Kartoon</span>
                        <span class="block text-sm text-muted-foreground-1">samia@site.com</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="h-px w-72 min-w-72 align-top">
                  <a class="block p-6" href="#">
                    <div class="flex gap-x-1 mb-2">
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                    </div>
                    <span class="block text-sm font-semibold text-foreground">Buy the product, you will not regret it!</span>
                    <span class="block text-sm text-muted-foreground-1">Don't let this merchandise get away! It's a must buy and you will look good in it while working out.</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="text-sm text-muted-foreground-2">10 Jan 2022</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
                      <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                      </svg>
                      Published
                    </span>
                  </a>
                </td>
              </tr>
              
              <tr class="bg-layer hover:bg-layer-hover">
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-4">
                      <img class="shrink-0 size-9.5 rounded-lg" src="https://images.unsplash.com/photo-1594032194509-0056023973b2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                      <div>
                        <span class="block text-sm font-semibold text-foreground">Asos T-shirts</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <div class="flex items-center gap-x-3">
                      <span class="inline-flex items-center justify-center size-9.5 rounded-full bg-surface-2">
                        <span class="font-medium text-foreground">D</span>
                      </span>
                      <div class="grow">
                        <span class="block text-sm font-semibold text-foreground">David Harrison</span>
                        <span class="block text-sm text-muted-foreground-1">david@site.com</span>
                      </div>
                    </div>
                  </a>
                </td>
                <td class="h-px w-72 min-w-72 align-top">
                  <a class="block p-6" href="#">
                    <div class="flex gap-x-1 mb-2">
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                      <svg class="shrink-0 size-3 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                      </svg>
                    </div>
                    <span class="block text-sm font-semibold text-foreground">Ready for the heat!</span>
                    <span class="block text-sm text-muted-foreground-1">As good as the heat Rdy T-shirt but without the sleeves. Love the stripes on the back.</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="text-sm text-muted-foreground-2">07 May 2022</span>
                  </a>
                </td>
                <td class="size-px whitespace-nowrap align-top">
                  <a class="block p-6" href="#">
                    <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
                      <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                      </svg>
                      Published
                    </span>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>

<div class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-t border-table-line">
            <div class="max-w-sm space-y-3">
              <select class="py-2 px-3 pe-9 block bg-layer border-layer-line text-layer-foreground rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option selected>5</option>
                <option>6</option>
              </select>
            </div>