Tables

<div className="dashboard-card overflow-hidden !p-0">
  <div className="px-8 py-6 flex justify-between items-center">
    <div>
      <h3 className="text-base font-black">Recent Transactions</h3>
      <p className="text-xs font-medium text-slate-400">Manage customer payments</p>
    </div>
    <button className="bg-slate-900 text-white dark:bg-white dark:text-slate-900 px-5 py-2.5 rounded-xl text-sm font-black">
      Export CSV
    </button>
  </div>
  <table className="w-full border-collapse">
    <thead className="bg-slate-50/50 dark:bg-white/2"> ... </thead>
    <tbody className="divide-y divide-gray-50 dark:divide-white/5">
      {transactions.map(tx => (
        <tr className="hover:bg-slate-50/30">
          <td className="px-8 py-6 text-sm font-bold">{tx.customer}</td>
          <td className="px-8 py-6 text-sm font-black text-right relative">
            <button onClick={() => setOpenId(tx.id)}>View</button>
            {openId === tx.id && <RowActionsMenu ref={menuRef} />}
          </td>
        </tr>
      ))}
    </tbody>
  </table>

  <div className="px-8 py-5 flex justify-between items-center sm:flex-row flex-col gap-4">
    <p className="text-xs font-bold text-slate-400">Showing 1 to 10 of 48 results</p>
    <div className="flex items-center gap-2">
      <button className="p-2 border rounded-xl"><ChevronLeft className="w-4 h-4" /></button>
      <button className="w-9 h-9 rounded-xl bg-purple-600 text-white">1</button>
      <button className="p-2 border rounded-xl"><ChevronRight className="w-4 h-4" /></button>
    </div>
  </div>
</div>

<div className="dashboard-card p-0 overflow-hidden">
  <div className="p-6 flex flex-wrap justify-between items-center bg-white dark:bg-slate-950 relative z-40">
     <div className="relative flex-1 md:max-w-xl">
        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4" />
        <input className="w-full pl-11 pr-4 py-2.5 rounded-xl bg-slate-50" />
     </div>
     <div className="flex gap-3">
       <SimpleDropdown value={role} options={["All Roles", "Owners", "Admin", "Management"]} icon={Users} />
       <SimpleDropdown value={status} options={["All Status", "Active", "Pending", "Inactive"]} icon={ListFilter} />
     </div>
  </div>
  <table className="w-full">
     <tr className="hover:bg-slate-50/50">
       <td className="px-6 py-4">
         <div className="flex items-center gap-3">
           <Avatar name={m.name} />
           <div><p className="font-bold">{m.name}</p><p className="text-[10px]">{m.email}</p></div>
         </div>
       </td>
       <td className="text-center">
         <Badge variant={m.role === 'Owners' ? 'primary' : 'secondary'}>{m.role}</Badge>
       </td>
       <td className="text-center relative">
         <RowActionMenu zIndex={100} shadow="shadow-2xl" options={['Change Role', 'Edit Member', 'Deactivate', 'Remove']} />
       </td>
     </tr>
  </table>
  <div className="p-6 bg-slate-50 flex justify-between items-center relative z-30">
    <div className="flex items-center gap-3">
       <span className="text-[10px] font-black uppercase">Rows per page:</span>
       <RowsPerPageSelector value={rowsPerPage} isOpen={isRowsOpen} onToggle={() => setIsRowsOpen(!isRowsOpen)} />
    </div>
    <div className="flex items-center gap-6">
       <span className="text-[10px] font-black uppercase">1-10 of 48</span>
       <div className="flex gap-1">
          <button className="p-1.5 border rounded-lg"><ChevronLeft className="w-4 h-4" /></button>
          <button className="p-1.5 border rounded-lg"><ChevronRight className="w-4 h-4" /></button>
       </div>
    </div>
  </div>
</div>