【tailwindcss】Table templete

NOBALISH

Simple Card

Name	Date	Email	State
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Canceled	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit

              
 <table class="w-full border-collapse bg-white text-left text-sm text-gray-500">
   <thead class="bg-gray-50">
     <tr>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Name</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Date</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Email</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">State</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900"></th>
     </tr>
   </thead>
   <tbody class="divide-y divide-gray-100 border-t border-gray-100">
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-semibold text-red-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
           </svg>
           Canceled
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
   </tbody>
 </table>

Name	Date	Email	State
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Canceled	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit

                              
 <table class="w-full border-collapse bg-white text-left text-sm text-gray-500">
   <thead class="bg-gray-50">
     <tr>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Name</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Date</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Email</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">State</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900"></th>
     </tr>
   </thead>
   <tbody class="divide-y divide-gray-100 border-t border-gray-100">
     <tr class="odd:bg-white even:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr class="odd:bg-white even:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr class="odd:bg-white even:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-semibold text-red-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
           </svg>
           Canceled
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr class="odd:bg-white even:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr class="odd:bg-white even:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
   </tbody>
 </table>

Name	Date	Email	State
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Canceled	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit

                              
 <table class="w-full border-collapse bg-white text-left text-sm text-gray-500">
   <thead class="bg-gray-50">
     <tr>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Name</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Date</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Email</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">State</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900"></th>
     </tr>
   </thead>
   <tbody class="divide-y divide-gray-100 border-t border-gray-100">
     <tr class="hover:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr class="hover:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr class="hover:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-semibold text-red-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
           </svg>
           Canceled
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr class="hover:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr class="hover:bg-gray-50">
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
   </tbody>
 </table>

Name	Date	Email	State
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Canceled	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit

                      
 <table class="w-full border-collapse border border-gray-200 bg-white text-left text-sm text-gray-500">
   <thead class="bg-gray-50">
     <tr>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Name</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Date</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">Email</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900">State</th>
       <th scope="col" class="px-6 py-4 font-medium text-gray-900"></th>
     </tr>
   </thead>
   <tbody class="divide-y divide-gray-100 border-t border-gray-100">
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-semibold text-red-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
           </svg>
           Canceled
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
     <tr>
       <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
       <td class="px-6 py-4">Nov.4 2022</td>
       <td class="px-6 py-4">helen@sailboatui.com</td>
       <td class="px-6 py-4">
         <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
             <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
           </svg>
           Paid
         </span>
       </td>
       <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
     </tr>
   </tbody>
 </table>

Name	Date	Email	State
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Canceled	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit
Helen Howard	Nov.4 2022	helen@sailboatui.com	Paid	Delete Edit

                      
 <div class="overflow-hidden rounded-lg border border-gray-200 shadow-md">
   <table class="w-full border-collapse bg-white text-left text-sm text-gray-500">
     <thead class="bg-gray-50">
       <tr>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900">Name</th>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900">Date</th>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900">Email</th>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900">State</th>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900"></th>
       </tr>
     </thead>
     <tbody class="divide-y divide-gray-100 border-t border-gray-100">
       <tr class="hover:bg-gray-50">
         <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
         <td class="px-6 py-4">Nov.4 2022</td>
         <td class="px-6 py-4">helen@sailboatui.com</td>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
               <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
             </svg>
             Paid
           </span>
         </td>
         <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
       </tr>
       <tr class="hover:bg-gray-50">
         <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
         <td class="px-6 py-4">Nov.4 2022</td>
         <td class="px-6 py-4">helen@sailboatui.com</td>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
               <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
             </svg>
             Paid
           </span>
         </td>
         <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
       </tr>
       <tr class="hover:bg-gray-50">
         <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
         <td class="px-6 py-4">Nov.4 2022</td>
         <td class="px-6 py-4">helen@sailboatui.com</td>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-semibold text-red-600">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
               <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
             </svg>
             Canceled
           </span>
         </td>
         <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
       </tr>
       <tr class="hover:bg-gray-50">
         <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
         <td class="px-6 py-4">Nov.4 2022</td>
         <td class="px-6 py-4">helen@sailboatui.com</td>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
               <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
             </svg>
             Paid
           </span>
         </td>
         <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
       </tr>
       <tr class="hover:bg-gray-50">
         <th class="px-6 py-4 font-medium text-gray-900">Helen Howard</th>
         <td class="px-6 py-4">Nov.4 2022</td>
         <td class="px-6 py-4">helen@sailboatui.com</td>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3">
               <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
             </svg>
             Paid
           </span>
         </td>
         <td class="flex justify-end gap-4 px-6 py-4 font-medium"><a href="">Delete</a><a href="" class="text-primary-700">Edit</a></td>
       </tr>
     </tbody>
   </table>
 </div>

Name	State	Role	Team
Steven Jobs jobs@sailboatui.com	Active	Product Designer	Design Product Develop
Steven Jobs jobs@sailboatui.com	Active	Product Designer	Design Product Develop
Steven Jobs jobs@sailboatui.com	Active	Product Designer	Design Product Develop
Steven Jobs jobs@sailboatui.com	Active	Product Designer	Design Product Develop
Steven Jobs jobs@sailboatui.com	Active	Product Designer	Design Product Develop

                      
 <div class="overflow-hidden rounded-lg border border-gray-200 shadow-md">
   <table class="w-full border-collapse bg-white text-left text-sm text-gray-500">
     <thead class="bg-gray-50">
       <tr>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900">Name</th>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900">State</th>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900">Role</th>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900">Team</th>
         <th scope="col" class="px-6 py-4 font-medium text-gray-900"></th>
       </tr>
     </thead>
     <tbody class="divide-y divide-gray-100 border-t border-gray-100">
       <tr class="hover:bg-gray-50">
         <th class="flex gap-3 px-6 py-4 font-normal text-gray-900">
           <div class="relative h-10 w-10">
             <img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
             <span class="absolute right-0 bottom-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
           </div>
           <div class="text-sm">
             <div class="font-medium text-gray-700">Steven Jobs</div>
             <div class="text-gray-400">jobs@sailboatui.com</div>
           </div>
         </th>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
             <span class="h-1.5 w-1.5 rounded-full bg-green-600"></span>
             Active
           </span>
         </td>
         <td class="px-6 py-4">Product Designer</td>
         <td class="px-6 py-4">
           <div class="flex gap-2">
             <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600"> Design </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600"> Product </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-violet-50 px-2 py-1 text-xs font-semibold text-violet-600"> Develop </span>
           </div>
         </td>
         <td class="px-6 py-4">
           <div class="flex justify-end gap-4">
             <a x-data="{ tooltip: 'Delete' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
               </svg>
             </a>
             <a x-data="{ tooltip: 'Edite' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
               </svg>
             </a>
           </div>
         </td>
       </tr>
       <tr class="hover:bg-gray-50">
         <th class="flex gap-3 px-6 py-4 font-normal text-gray-900">
           <div class="relative h-10 w-10">
             <img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
             <span class="absolute right-0 bottom-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
           </div>
           <div class="text-sm">
             <div class="font-medium text-gray-700">Steven Jobs</div>
             <div class="text-gray-400">jobs@sailboatui.com</div>
           </div>
         </th>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
             <span class="h-1.5 w-1.5 rounded-full bg-green-600"></span>
             Active
           </span>
         </td>
         <td class="px-6 py-4">Product Designer</td>
         <td class="px-6 py-4">
           <div class="flex gap-2">
             <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600"> Design </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600"> Product </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-violet-50 px-2 py-1 text-xs font-semibold text-violet-600"> Develop </span>
           </div>
         </td>
         <td class="px-6 py-4">
           <div class="flex justify-end gap-4">
             <a x-data="{ tooltip: 'Delete' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
               </svg>
             </a>
             <a x-data="{ tooltip: 'Edite' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
               </svg>
             </a>
           </div>
         </td>
       </tr>
       <tr class="hover:bg-gray-50">
         <th class="flex gap-3 px-6 py-4 font-normal text-gray-900">
           <div class="relative h-10 w-10">
             <img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
             <span class="absolute right-0 bottom-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
           </div>
           <div class="text-sm">
             <div class="font-medium text-gray-700">Steven Jobs</div>
             <div class="text-gray-400">jobs@sailboatui.com</div>
           </div>
         </th>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
             <span class="h-1.5 w-1.5 rounded-full bg-green-600"></span>
             Active
           </span>
         </td>
         <td class="px-6 py-4">Product Designer</td>
         <td class="px-6 py-4">
           <div class="flex gap-2">
             <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600"> Design </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600"> Product </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-violet-50 px-2 py-1 text-xs font-semibold text-violet-600"> Develop </span>
           </div>
         </td>
         <td class="px-6 py-4">
           <div class="flex justify-end gap-4">
             <a x-data="{ tooltip: 'Delete' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
               </svg>
             </a>
             <a x-data="{ tooltip: 'Edite' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
               </svg>
             </a>
           </div>
         </td>
       </tr>
       <tr class="hover:bg-gray-50">
         <th class="flex gap-3 px-6 py-4 font-normal text-gray-900">
           <div class="relative h-10 w-10">
             <img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
             <span class="absolute right-0 bottom-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
           </div>
           <div class="text-sm">
             <div class="font-medium text-gray-700">Steven Jobs</div>
             <div class="text-gray-400">jobs@sailboatui.com</div>
           </div>
         </th>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
             <span class="h-1.5 w-1.5 rounded-full bg-green-600"></span>
             Active
           </span>
         </td>
         <td class="px-6 py-4">Product Designer</td>
         <td class="px-6 py-4">
           <div class="flex gap-2">
             <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600"> Design </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600"> Product </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-violet-50 px-2 py-1 text-xs font-semibold text-violet-600"> Develop </span>
           </div>
         </td>
         <td class="px-6 py-4">
           <div class="flex justify-end gap-4">
             <a x-data="{ tooltip: 'Delete' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
               </svg>
             </a>
             <a x-data="{ tooltip: 'Edite' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
               </svg>
             </a>
           </div>
         </td>
       </tr>
       <tr class="hover:bg-gray-50">
         <th class="flex gap-3 px-6 py-4 font-normal text-gray-900">
           <div class="relative h-10 w-10">
             <img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
             <span class="absolute right-0 bottom-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
           </div>
           <div class="text-sm">
             <div class="font-medium text-gray-700">Steven Jobs</div>
             <div class="text-gray-400">jobs@sailboatui.com</div>
           </div>
         </th>
         <td class="px-6 py-4">
           <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
             <span class="h-1.5 w-1.5 rounded-full bg-green-600"></span>
             Active
           </span>
         </td>
         <td class="px-6 py-4">Product Designer</td>
         <td class="px-6 py-4">
           <div class="flex gap-2">
             <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600"> Design </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600"> Product </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-violet-50 px-2 py-1 text-xs font-semibold text-violet-600"> Develop </span>
           </div>
         </td>
         <td class="px-6 py-4">
           <div class="flex justify-end gap-4">
             <a x-data="{ tooltip: 'Delete' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
               </svg>
             </a>
             <a x-data="{ tooltip: 'Edite' }" href="#">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" x-tooltip="tooltip">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
               </svg>
             </a>
           </div>
         </td>
       </tr>
     </tbody>
   </table>
 </div>

Product name	Color	Category	Price
Apple MacBook Pro 17"	Silver	Laptop	$2999
Microsoft Surface Pro	White	Laptop PC	$1999
Magic Mouse 2	Black	Accessories	$99

                      
 <div class="relative overflow-x-auto">
   <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
       <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
               <th scope="col" class="px-6 py-3">
                   Product name
               </th>
               <th scope="col" class="px-6 py-3">
                   Color
               </th>
               <th scope="col" class="px-6 py-3">
                   Category
               </th>
               <th scope="col" class="px-6 py-3">
                   Price
               </th>
           </tr>
       </thead>
       <tbody>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Apple MacBook Pro 17"
               </th>
               <td class="px-6 py-4">
                   Silver
               </td>
               <td class="px-6 py-4">
                   Laptop
               </td>
               <td class="px-6 py-4">
                   $2999
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Microsoft Surface Pro
               </th>
               <td class="px-6 py-4">
                   White
               </td>
               <td class="px-6 py-4">
                   Laptop PC
               </td>
               <td class="px-6 py-4">
                   $1999
               </td>
           </tr>
           <tr class="bg-white dark:bg-gray-800">
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Magic Mouse 2
               </th>
               <td class="px-6 py-4">
                   Black
               </td>
               <td class="px-6 py-4">
                   Accessories
               </td>
               <td class="px-6 py-4">
                   $99
               </td>
           </tr>
       </tbody>
   </table>
 </div>

Product name	Color	Category	Price	Action
Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit
Google Pixel Phone	Gray	Phone	$799	Edit
Apple Watch 5	Red	Wearables	$999	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
                <th scope="col" class="px-6 py-3">
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    Laptop
                </td>
                <td class="px-6 py-4">
                    $2999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Microsoft Surface Pro
                </th>
                <td class="px-6 py-4">
                    White
                </td>
                <td class="px-6 py-4">
                    Laptop PC
                </td>
                <td class="px-6 py-4">
                    $1999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Magic Mouse 2
                </th>
                <td class="px-6 py-4">
                    Black
                </td>
                <td class="px-6 py-4">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $99
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Google Pixel Phone
                </th>
                <td class="px-6 py-4">
                    Gray
                </td>
                <td class="px-6 py-4">
                    Phone
                </td>
                <td class="px-6 py-4">
                    $799
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple Watch 5
                </th>
                <td class="px-6 py-4">
                    Red
                </td>
                <td class="px-6 py-4">
                    Wearables
                </td>
                <td class="px-6 py-4">
                    $999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
 </div>

Product name	Color	Category	Price
Apple MacBook Pro 17"	Silver	Laptop	$2999
Microsoft Surface Pro	White	Laptop PC	$1999
Magic Mouse 2	Black	Accessories	$99
Google Pixel Phone	Gray	Phone	$799
Apple Watch 5	Red	Wearables	$999

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
            <tr>
                <th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-b border-gray-200 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
                    Laptop
                </td>
                <td class="px-6 py-4">
                    $2999
                </td>
            </tr>
            <tr class="border-b border-gray-200 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
                    Microsoft Surface Pro
                </th>
                <td class="px-6 py-4">
                    White
                </td>
                <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
                    Laptop PC
                </td>
                <td class="px-6 py-4">
                    $1999
                </td>
            </tr>
            <tr class="border-b border-gray-200 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
                    Magic Mouse 2
                </th>
                <td class="px-6 py-4">
                    Black
                </td>
                <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $99
                </td>
            </tr>
            <tr class="border-b border-gray-200 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
                    Google Pixel Phone
                </th>
                <td class="px-6 py-4">
                    Gray
                </td>
                <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
                    Phone
                </td>
                <td class="px-6 py-4">
                    $799
                </td>
            </tr>
            <tr>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
                    Apple Watch 5
                </th>
                <td class="px-6 py-4">
                    Red
                </td>
                <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
                    Wearables
                </td>
                <td class="px-6 py-4">
                    $999
                </td>
            </tr>
        </tbody>
    </table>
 </div>

Product name	Color	Category	Price	Edit
Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
                <th scope="col" class="px-6 py-3">
                    <span class="sr-only">Edit</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    Laptop
                </td>
                <td class="px-6 py-4">
                    $2999
                </td>
                <td class="px-6 py-4 text-right">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Microsoft Surface Pro
                </th>
                <td class="px-6 py-4">
                    White
                </td>
                <td class="px-6 py-4">
                    Laptop PC
                </td>
                <td class="px-6 py-4">
                    $1999
                </td>
                <td class="px-6 py-4 text-right">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Magic Mouse 2
                </th>
                <td class="px-6 py-4">
                    Black
                </td>
                <td class="px-6 py-4">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $99
                </td>
                <td class="px-6 py-4 text-right">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
 </div>

Product name	Color	Category	Price	Edit
Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
   <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
       <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
               <th scope="col" class="px-6 py-3">
                   Product name
               </th>
               <th scope="col" class="px-6 py-3">
                   <div class="flex items-center">
                       Color
                       <a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
   <path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
 </svg></a>
                   </div>
               </th>
               <th scope="col" class="px-6 py-3">
                   <div class="flex items-center">
                       Category
                       <a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
   <path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
 </svg></a>
                   </div>
               </th>
               <th scope="col" class="px-6 py-3">
                   <div class="flex items-center">
                       Price
                       <a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
   <path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
 </svg></a>
                   </div>
               </th>
               <th scope="col" class="px-6 py-3">
                   <span class="sr-only">Edit</span>
               </th>
           </tr>
       </thead>
       <tbody>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Apple MacBook Pro 17"
               </th>
               <td class="px-6 py-4">
                   Silver
               </td>
               <td class="px-6 py-4">
                   Laptop
               </td>
               <td class="px-6 py-4">
                   $2999
               </td>
               <td class="px-6 py-4 text-right">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Microsoft Surface Pro
               </th>
               <td class="px-6 py-4">
                   White
               </td>
               <td class="px-6 py-4">
                   Laptop PC
               </td>
               <td class="px-6 py-4">
                   $1999
               </td>
               <td class="px-6 py-4 text-right">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-white dark:bg-gray-800">
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Magic Mouse 2
               </th>
               <td class="px-6 py-4">
                   Black
               </td>
               <td class="px-6 py-4">
                   Accessories
               </td>
               <td class="px-6 py-4">
                   $99
               </td>
               <td class="px-6 py-4 text-right">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
               </td>
           </tr>
       </tbody>
   </table>
 </div>

Product name	Qty	Price
Apple MacBook Pro 17"	1	$2999
Microsoft Surface Pro	1	$1999
Magic Mouse 2	1	$99
Total	3	21,000

                      
 <div class="relative overflow-x-auto">
   <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
       <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
           <tr>
               <th scope="col" class="px-6 py-3 rounded-s-lg">
                   Product name
               </th>
               <th scope="col" class="px-6 py-3">
                   Qty
               </th>
               <th scope="col" class="px-6 py-3 rounded-e-lg">
                   Price
               </th>
           </tr>
       </thead>
       <tbody>
           <tr class="bg-white dark:bg-gray-800">
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Apple MacBook Pro 17"
               </th>
               <td class="px-6 py-4">
                   1
               </td>
               <td class="px-6 py-4">
                   $2999
               </td>
           </tr>
           <tr class="bg-white dark:bg-gray-800">
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Microsoft Surface Pro
               </th>
               <td class="px-6 py-4">
                   1
               </td>
               <td class="px-6 py-4">
                   $1999
               </td>
           </tr>
           <tr class="bg-white dark:bg-gray-800">
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Magic Mouse 2
               </th>
               <td class="px-6 py-4">
                  1
               </td>
               <td class="px-6 py-4">
                   $99
               </td>
           </tr>
       </tbody>
       <tfoot>
           <tr class="font-semibold text-gray-900 dark:text-white">
               <th scope="row" class="px-6 py-3 text-base">Total</th>
               <td class="px-6 py-3">3</td>
               <td class="px-6 py-3">21,000</td>
           </tr>
       </tfoot>
   </table>
 </div>

Our products
Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.
Product name	Color	Category	Price	Edit
Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <caption class="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
            Our products
            <p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.</p>
        </caption>
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
                <th scope="col" class="px-6 py-3">
                    <span class="sr-only">Edit</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    Laptop
                </td>
                <td class="px-6 py-4">
                    $2999
                </td>
                <td class="px-6 py-4 text-right">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Microsoft Surface Pro
                </th>
                <td class="px-6 py-4">
                    White
                </td>
                <td class="px-6 py-4">
                    Laptop PC
                </td>
                <td class="px-6 py-4">
                    $1999
                </td>
                <td class="px-6 py-4 text-right">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white dark:bg-gray-800">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Magic Mouse 2
                </th>
                <td class="px-6 py-4">
                    Black
                </td>
                <td class="px-6 py-4">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $99
                </td>
                <td class="px-6 py-4 text-right">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
 </div>

Product name	Color	Category	Price
Apple MacBook Pro 17"	Silver	Laptop	$2999
Microsoft Surface Pro	White	Laptop PC	$1999
Magic Mouse 2	Black	Accessories	$99

                      
 <div class="relative overflow-x-auto">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-900 uppercase dark:text-gray-400">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white dark:bg-gray-800">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    Laptop
                </td>
                <td class="px-6 py-4">
                    $2999
                </td>
            </tr>
            <tr class="bg-white dark:bg-gray-800">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Microsoft Surface Pro
                </th>
                <td class="px-6 py-4">
                    White
                </td>
                <td class="px-6 py-4">
                    Laptop PC
                </td>
                <td class="px-6 py-4">
                    $1999
                </td>
            </tr>
            <tr class="bg-white dark:bg-gray-800">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Magic Mouse 2
                </th>
                <td class="px-6 py-4">
                    Black
                </td>
                <td class="px-6 py-4">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $99
                </td>
            </tr>
        </tbody>
    </table>
 </div>

Product name	Color	Category	Price	Action
Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
                <th scope="col" class="px-6 py-3">
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    Laptop
                </td>
                <td class="px-6 py-4">
                    $2999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Microsoft Surface Pro
                </th>
                <td class="px-6 py-4">
                    White
                </td>
                <td class="px-6 py-4">
                    Laptop PC
                </td>
                <td class="px-6 py-4">
                    $1999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white dark:bg-gray-800">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Magic Mouse 2
                </th>
                <td class="px-6 py-4">
                    Black
                </td>
                <td class="px-6 py-4">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $99
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
  </div>

checkbox	Product name	Color	Category	Accessories	Available	Price	Weight	Action
checkbox	Apple MacBook Pro 17"	Silver	Laptop	Yes	Yes	$2999	3.0 lb.	Edit Remove
checkbox	Microsoft Surface Pro	White	Laptop PC	No	Yes	$1999	1.0 lb.	Edit Remove
checkbox	Magic Mouse 2	Black	Accessories	Yes	No	$99	0.2 lb.	Edit Remove
checkbox	Apple Watch	Black	Watches	Yes	No	$199	0.12 lb.	Edit Remove
checkbox	Apple iMac	Silver	PC	Yes	Yes	$2999	7.0 lb.	Edit Remove
checkbox	Apple AirPods	White	Accessories	No	Yes	$399	38 g	Edit Remove
checkbox	iPad Pro	Gold	Tablet	No	Yes	$699	1.3 lb.	Edit Remove
checkbox	Magic Keyboard	Black	Accessories	Yes	Yes	$99	453 g	Edit Remove
checkbox	Apple TV 4K	Black	TV	Yes	No	$179	1.78 lb.	Edit Remove
checkbox	AirTag	Silver	Accessories	Yes	No	$29	53 g	Edit Remove

                      
 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
   <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
     <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
         <tr>
             <th scope="col" class="p-4">
                 <div class="flex items-center">
                     <input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-all-search" class="sr-only">checkbox</label>
                 </div>
             </th>
             <th scope="col" class="px-6 py-3">
                 Product name
             </th>
             <th scope="col" class="px-6 py-3">
                 Color
             </th>
             <th scope="col" class="px-6 py-3">
                 Category
             </th>
             <th scope="col" class="px-6 py-3">
                 Accessories
             </th>
             <th scope="col" class="px-6 py-3">
                 Available
             </th>
             <th scope="col" class="px-6 py-3">
                 Price
             </th>
             <th scope="col" class="px-6 py-3">
                 Weight
             </th>
             <th scope="col" class="px-6 py-3">
                 Action
             </th>
         </tr>
     </thead>
     <tbody>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Apple MacBook Pro 17"
             </th>
             <td class="px-6 py-4">
                 Silver
             </td>
             <td class="px-6 py-4">
                 Laptop
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 $2999
             </td>
             <td class="px-6 py-4">
                 3.0 lb.
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Microsoft Surface Pro
             </th>
             <td class="px-6 py-4">
                 White
             </td>
             <td class="px-6 py-4">
                 Laptop PC
             </td>
             <td class="px-6 py-4">
                 No
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 $1999
             </td>
             <td class="px-6 py-4">
                 1.0 lb.
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Magic Mouse 2
             </th>
             <td class="px-6 py-4">
                 Black
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 No
             </td>
             <td class="px-6 py-4">
                 $99
             </td>
             <td class="px-6 py-4">
                 0.2 lb.
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Apple Watch
             </th>
             <td class="px-6 py-4">
                 Black
             </td>
             <td class="px-6 py-4">
                 Watches
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 No
             </td>
             <td class="px-6 py-4">
                 $199
             </td>
             <td class="px-6 py-4">
                 0.12 lb.
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Apple iMac
             </th>
             <td class="px-6 py-4">
                 Silver
             </td>
             <td class="px-6 py-4">
                 PC
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 $2999
             </td>
             <td class="px-6 py-4">
                 7.0 lb.
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Apple AirPods
             </th>
             <td class="px-6 py-4">
                 White
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 No
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 $399
             </td>
             <td class="px-6 py-4">
                 38 g
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 iPad Pro
             </th>
             <td class="px-6 py-4">
                 Gold
             </td>
             <td class="px-6 py-4">
                 Tablet
             </td>
             <td class="px-6 py-4">
                 No
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 $699
             </td>
             <td class="px-6 py-4">
                 1.3 lb.
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Magic Keyboard
             </th>
             <td class="px-6 py-4">
                 Black
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 $99
             </td>
             <td class="px-6 py-4">
                 453 g
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Apple TV 4K
             </th>
             <td class="px-6 py-4">
                 Black
             </td>
             <td class="px-6 py-4">
                 TV
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 No
             </td>
             <td class="px-6 py-4">
                 $179
             </td>
             <td class="px-6 py-4">
                 1.78 lb.
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 AirTag
             </th>
             <td class="px-6 py-4">
                 Silver
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 Yes
             </td>
             <td class="px-6 py-4">
                 No
             </td>
             <td class="px-6 py-4">
                 $29
             </td>
             <td class="px-6 py-4">
                 53 g
             </td>
             <td class="flex items-center px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                 <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a>
             </td>
         </tr>
     </tbody>
 </table>
 </div>

checkbox	Product name	Color	Category	Price	Action
checkbox	Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
checkbox	Microsoft Surface Pro	White	Laptop PC	$1999	Edit
checkbox	Magic Mouse 2	Black	Accessories	$99	Edit
checkbox	Apple Watch	Silver	Accessories	$179	Edit
checkbox	iPad	Gold	Tablet	$699	Edit
checkbox	Apple iMac 27"	Silver	PC Desktop	$3999	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <div class="pb-4 bg-white dark:bg-gray-900">
        <label for="table-search" class="sr-only">Search</label>
        <div class="relative mt-1">
            <div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                </svg>
            </div>
            <input type="text" id="table-search" class="block pt-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for items">
        </div>
    </div>
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="p-4">
                    <div class="flex items-center">
                        <input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-all-search" class="sr-only">checkbox</label>
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
                <th scope="col" class="px-6 py-3">
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    Laptop
                </td>
                <td class="px-6 py-4">
                    $2999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Microsoft Surface Pro
                </th>
                <td class="px-6 py-4">
                    White
                </td>
                <td class="px-6 py-4">
                    Laptop PC
                </td>
                <td class="px-6 py-4">
                    $1999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Magic Mouse 2
                </th>
                <td class="px-6 py-4">
                    Black
                </td>
                <td class="px-6 py-4">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $99
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-3" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple Watch
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $179
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-3" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    iPad
                </th>
                <td class="px-6 py-4">
                    Gold
                </td>
                <td class="px-6 py-4">
                    Tablet
                </td>
                <td class="px-6 py-4">
                    $699
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-3" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple iMac 27"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    PC Desktop
                </td>
                <td class="px-6 py-4">
                    $3999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
 </div>

checkbox	Product name	Color	Category	Price	Action
checkbox	Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
checkbox	Microsoft Surface Pro	White	Laptop PC	$1999	Edit
checkbox	Magic Mouse 2	Black	Accessories	$99	Edit
checkbox	Apple Watch	Silver	Accessories	$179	Edit
checkbox	iPad	Gold	Tablet	$699	Edit
checkbox	Apple iMac 27"	Silver	PC Desktop	$3999	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <div class="flex flex-column sm:flex-row flex-wrap space-y-4 sm:space-y-0 items-center justify-between pb-4">
        <div>
            <button id="dropdownRadioButton" data-dropdown-toggle="dropdownRadio" class="inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                <svg class="w-3 h-3 text-gray-500 dark:text-gray-400 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"/>
                    </svg>
                Last 30 days
                <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                </svg>
            </button>
            <!-- Dropdown menu -->
            <div id="dropdownRadio" class="z-10 hidden w-48 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(522.5px, 3847.5px, 0px);">
                <ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownRadioButton">
                    <li>
                        <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                            <input id="filter-radio-example-1" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="filter-radio-example-1" class="w-full ms-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last day</label>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                            <input checked="" id="filter-radio-example-2" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="filter-radio-example-2" class="w-full ms-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last 7 days</label>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                            <input id="filter-radio-example-3" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="filter-radio-example-3" class="w-full ms-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last 30 days</label>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                            <input id="filter-radio-example-4" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="filter-radio-example-4" class="w-full ms-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last month</label>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                            <input id="filter-radio-example-5" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="filter-radio-example-5" class="w-full ms-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last year</label>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <label for="table-search" class="sr-only">Search</label>
        <div class="relative">
            <div class="absolute inset-y-0 left-0 rtl:inset-r-0 rtl:right-0 flex items-center ps-3 pointer-events-none">
                <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
            </div>
            <input type="text" id="table-search" class="block p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder=" ">
        </div>
    </div>
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="p-4">
                    <div class="flex items-center">
                        <input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-all-search" class="sr-only">checkbox</label>
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
                <th scope="col" class="px-6 py-3">
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    Laptop
                </td>
                <td class="px-6 py-4">
                    $2999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Microsoft Surface Pro
                </th>
                <td class="px-6 py-4">
                    White
                </td>
                <td class="px-6 py-4">
                    Laptop PC
                </td>
                <td class="px-6 py-4">
                    $1999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Magic Mouse 2
                </th>
                <td class="px-6 py-4">
                    Black
                </td>
                <td class="px-6 py-4">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $99
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-3" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple Watch
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $179
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-3" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    iPad
                </th>
                <td class="px-6 py-4">
                    Gold
                </td>
                <td class="px-6 py-4">
                    Tablet
                </td>
                <td class="px-6 py-4">
                    $699
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
                <td class="w-4 p-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="checkbox-table-3" class="sr-only">checkbox</label>
                    </div>
                </td>
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple iMac 27"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4">
                    PC Desktop
                </td>
                <td class="px-6 py-4">
                    $3999
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
 </div>

checkbox	Product name	Color	Category	Price	Action
checkbox	Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
checkbox	Microsoft Surface Pro	White	Laptop PC	$1999	Edit
checkbox	Magic Mouse 2	Black	Accessories	$99	Edit
checkbox	Apple Watch	Black	Watches	$199	Edit
checkbox	Apple iMac	Silver	PC	$2999	Edit
checkbox	Apple AirPods	White	Accessories	$399	Edit
checkbox	iPad Pro	Gold	Tablet	$699	Edit
checkbox	Magic Keyboard	Black	Accessories	$99	Edit
checkbox	Smart Folio iPad Air	Blue	Accessories	$79	Edit
checkbox	AirTag	Silver	Accessories	$29	Edit

Showing 1-10 of 1000

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
   <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
     <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
         <tr>
             <th scope="col" class="p-4">
                 <div class="flex items-center">
                     <input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-all-search" class="sr-only">checkbox</label>
                 </div>
             </th>
             <th scope="col" class="px-6 py-3">
                 Product name
             </th>
             <th scope="col" class="px-6 py-3">
                 Color
             </th>
             <th scope="col" class="px-6 py-3">
                 Category
             </th>
             <th scope="col" class="px-6 py-3">
                 Price
             </th>
             <th scope="col" class="px-6 py-3">
                 Action
             </th>
         </tr>
     </thead>
     <tbody>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Apple MacBook Pro 17"
             </th>
             <td class="px-6 py-4">
                 Silver
             </td>
             <td class="px-6 py-4">
                 Laptop
             </td>
             <td class="px-6 py-4">
                 $2999
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Microsoft Surface Pro
             </th>
             <td class="px-6 py-4">
                 White
             </td>
             <td class="px-6 py-4">
                 Laptop PC
             </td>
             <td class="px-6 py-4">
                 $1999
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Magic Mouse 2
             </th>
             <td class="px-6 py-4">
                 Black
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 $99
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Apple Watch
             </th>
             <td class="px-6 py-4">
                 Black
             </td>
             <td class="px-6 py-4">
                 Watches
             </td>
             <td class="px-6 py-4">
                 $199
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Apple iMac
             </th>
             <td class="px-6 py-4">
                 Silver
             </td>
             <td class="px-6 py-4">
                 PC
             </td>
             <td class="px-6 py-4">
                 $2999
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Apple AirPods
             </th>
             <td class="px-6 py-4">
                 White
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 $399
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 iPad Pro
             </th>
             <td class="px-6 py-4">
                 Gold
             </td>
             <td class="px-6 py-4">
                 Tablet
             </td>
             <td class="px-6 py-4">
                 $699
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Magic Keyboard
             </th>
             <td class="px-6 py-4">
                 Black
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 $99
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 Smart Folio iPad Air
             </th>
             <td class="px-6 py-4">
                 Blue
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 $79
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 AirTag
             </th>
             <td class="px-6 py-4">
                 Silver
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 $29
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
             </td>
         </tr>
     </tbody>
 </table>
 <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4" aria-label="Table navigation">
     <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">1-10</span> of <span class="font-semibold text-gray-900 dark:text-white">1000</span></span>
     <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
         <li>
             <a href="#" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
         </li>
         <li>
             <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
         </li>
         <li>
             <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
         </li>
         <li>
             <a href="#" aria-current="page" class="flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
         </li>
         <li>
             <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
         </li>
         <li>
             <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
         </li>
         <li>
     <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
         </li>
     </ul>
 </nav>
 </div>

checkbox	Product name	Color	Category	Price	Action
checkbox	Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
checkbox	Microsoft Surface Pro	White	Laptop PC	$1999	Edit
checkbox	Magic Mouse 2	Black	Accessories	$99	Edit
checkbox	Apple Watch	Silver	Accessories	$179	Edit
checkbox	iPad	Gold	Tablet	$699	Edit
checkbox	Apple iMac 27"	Silver	PC Desktop	$3999	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
   <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
       <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
               <th scope="col" class="p-4">
                   <div class="flex items-center">
                       <input id="checkbox-all" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-all" class="sr-only">checkbox</label>
                   </div>
               </th>
               <th scope="col" class="px-6 py-3">
                   Product name
               </th>
               <th scope="col" class="px-6 py-3">
                   Color
               </th>
               <th scope="col" class="px-6 py-3">
                   Category
               </th>
               <th scope="col" class="px-6 py-3">
                   Price
               </th>
               <th scope="col" class="px-6 py-3">
                   Action
               </th>
           </tr>
       </thead>
       <tbody>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-1" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Apple MacBook Pro 17"
               </th>
               <td class="px-6 py-4">
                   Silver
               </td>
               <td class="px-6 py-4">
                   Laptop
               </td>
               <td class="px-6 py-4">
                   $2999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-2" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Microsoft Surface Pro
               </th>
               <td class="px-6 py-4">
                   White
               </td>
               <td class="px-6 py-4">
                   Laptop PC
               </td>
               <td class="px-6 py-4">
                   $1999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-3" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Magic Mouse 2
               </th>
               <td class="px-6 py-4">
                   Black
               </td>
               <td class="px-6 py-4">
                   Accessories
               </td>
               <td class="px-6 py-4">
                   $99
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-3" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Apple Watch
               </th>
               <td class="px-6 py-4">
                   Silver
               </td>
               <td class="px-6 py-4">
                   Accessories
               </td>
               <td class="px-6 py-4">
                   $179
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-3" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   iPad
               </th>
               <td class="px-6 py-4">
                   Gold
               </td>
               <td class="px-6 py-4">
                   Tablet
               </td>
               <td class="px-6 py-4">
                   $699
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-3" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   Apple iMac 27"
               </th>
               <td class="px-6 py-4">
                   Silver
               </td>
               <td class="px-6 py-4">
                   PC Desktop
               </td>
               <td class="px-6 py-4">
                   $3999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
               </td>
           </tr>
       </tbody>
   </table>
 </div>

checkbox	Name	Position	Status	Action
checkbox	Neil Sims neil.sims@flowbite.com	React Developer	Online	Edit user
checkbox	Bonnie Green bonnie@flowbite.com	Designer	Online	Edit user
checkbox	Jese Leos jese@flowbite.com	Vue JS Developer	Online	Edit user
checkbox	Thomas Lean thomes@flowbite.com	UI/UX Engineer	Online	Edit user
checkbox	Leslie Livingston leslie@flowbite.com	SEO Specialist	Offline	Edit user

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
   <div class="flex items-center justify-between flex-column flex-wrap md:flex-row space-y-4 md:space-y-0 pb-4 bg-white dark:bg-gray-900">
       <div>
           <button id="dropdownActionButton" data-dropdown-toggle="dropdownAction" class="inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
               <span class="sr-only">Action button</span>
               Action
               <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
               </svg>
           </button>
           <!-- Dropdown menu -->
           <div id="dropdownAction" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
               <ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownActionButton">
                   <li>
                       <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Reward</a>
                   </li>
                   <li>
                       <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Promote</a>
                   </li>
                   <li>
                       <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Activate account</a>
                   </li>
               </ul>
               <div class="py-1">
                   <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delete User</a>
               </div>
           </div>
       </div>
       <label for="table-search" class="sr-only">Search</label>
       <div class="relative">
           <div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
               <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
               </svg>
           </div>
           <input type="text" id="table-search-users" class="block p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder=" ">
       </div>
   </div>
   <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
       <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
               <th scope="col" class="p-4">
                   <div class="flex items-center">
                       <input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-all-search" class="sr-only">checkbox</label>
                   </div>
               </th>
               <th scope="col" class="px-6 py-3">
                   Name
               </th>
               <th scope="col" class="px-6 py-3">
                   Position
               </th>
               <th scope="col" class="px-6 py-3">
                   Status
               </th>
               <th scope="col" class="px-6 py-3">
                   Action
               </th>
           </tr>
       </thead>
       <tbody>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                   <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
                   <div class="ps-3">
                       <div class="text-base font-semibold">Neil Sims</div>
                       <div class="font-normal text-gray-500">neil.sims@flowbite.com</div>
                   </div>  
               </th>
               <td class="px-6 py-4">
                   React Developer
               </td>
               <td class="px-6 py-4">
                   <div class="flex items-center">
                       <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Online
                   </div>
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
                   <div class="ps-3">
                       <div class="text-base font-semibold">Bonnie Green</div>
                       <div class="font-normal text-gray-500">bonnie@flowbite.com</div>
                   </div>
               </th>
               <td class="px-6 py-4">
                   Designer
               </td>
               <td class="px-6 py-4">
                   <div class="flex items-center">
                       <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Online
                   </div>
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
                   <div class="ps-3">
                       <div class="text-base font-semibold">Jese Leos</div>
                       <div class="font-normal text-gray-500">jese@flowbite.com</div>
                   </div>
               </th>
               <td class="px-6 py-4">
                   Vue JS Developer
               </td>
               <td class="px-6 py-4">
                   <div class="flex items-center">
                       <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Online
                   </div>
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
                   <div class="ps-3">
                       <div class="text-base font-semibold">Thomas Lean</div>
                       <div class="font-normal text-gray-500">thomes@flowbite.com</div>
                   </div>
               </th>
               <td class="px-6 py-4">
                   UI/UX Engineer
               </td>
               <td class="px-6 py-4">
                   <div class="flex items-center">
                       <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Online
                   </div>
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
               </td>
           </tr>
           <tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="w-4 p-4">
                   <div class="flex items-center">
                       <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                       <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                   </div>
               </td>
               <th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
                   <div class="ps-3">
                       <div class="text-base font-semibold">Leslie Livingston</div>
                       <div class="font-normal text-gray-500">leslie@flowbite.com</div>
                   </div>
               </th>
               <td class="px-6 py-4">
                   SEO Specialist
               </td>
               <td class="px-6 py-4">
                   <div class="flex items-center">
                       <div class="h-2.5 w-2.5 rounded-full bg-red-500 me-2"></div> Offline
                   </div>
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
               </td>
           </tr>
       </tbody>
   </table>
 </div>

Product	Price	Action
Apple Watch	$599	Remove
iMac 27"	$2499	Remove
IPhone 12	$999	Remove

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
   <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
       <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
               <th scope="col" class="px-16 py-3">
                   <span class="sr-only">Image</span>
               </th>
               <th scope="col" class="px-6 py-3">
                   Product
               </th>
               <th scope="col" class="px-6 py-3">
                   Qty
               </th>
               <th scope="col" class="px-6 py-3">
                   Price
               </th>
               <th scope="col" class="px-6 py-3">
                   Action
               </th>
           </tr>
       </thead>
       <tbody>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="p-4">
                   <img src="https://dummyimage.com/500x500" class="w-16 md:w-32 max-w-full max-h-full" alt="Apple Watch">
               </td>
               <td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
                   Apple Watch
               </td>
               <td class="px-6 py-4">
                   <div class="flex items-center">
                       <button class="inline-flex items-center justify-center p-1 me-3 text-sm font-medium h-6 w-6 text-gray-500 bg-white border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                           <span class="sr-only">Quantity button</span>
                           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
                               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
                           </svg>
                       </button>
                       <div>
                           <input type="number" id="first_product" class="bg-gray-50 w-14 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block px-2.5 py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="1" required>
                       </div>
                       <button class="inline-flex items-center justify-center h-6 w-6 p-1 ms-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                           <span class="sr-only">Quantity button</span>
                           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
                           </svg>
                       </button>
                   </div>
               </td>
               <td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
                   $599
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="p-4">
                   <img src="https://dummyimage.com/500x500" class="w-16 md:w-32 max-w-full max-h-full" alt="Apple iMac">
               </td>
               <td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
                   iMac 27"
               </td>
               <td class="px-6 py-4">
                   <div class="flex items-center">
                       <button class="inline-flex items-center justify-center p-1 text-sm font-medium h-6 w-6 text-gray-500 bg-white border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                           <span class="sr-only">Quantity button</span>
                           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
                               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
                           </svg>
                       </button>
                       <div class="ms-3">
                           <input type="number" id="first_product" class="bg-gray-50 w-14 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block px-2.5 py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="1" required>
                       </div>
                       <button class="inline-flex items-center justify-center h-6 w-6 p-1 ms-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                           <span class="sr-only">Quantity button</span>
                           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
                           </svg>
                       </button>
                   </div>
               </td>
               <td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
                   $2499
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
               </td>
           </tr>
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               <td class="p-4">
                   <img src="https://dummyimage.com/500x500" class="w-16 md:w-32 max-w-full max-h-full" alt="iPhone 12">
               </td>
               <td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
                   IPhone 12 
               </td>
               <td class="px-6 py-4">
                   <div class="flex items-center">
                       <button class="inline-flex items-center justify-center p-1 text-sm font-medium h-6 w-6 text-gray-500 bg-white border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                           <span class="sr-only">Quantity button</span>
                           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
                               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
                           </svg>
                       </button>
                       <div class="ms-3">
                           <input type="number" id="first_product" class="bg-gray-50 w-14 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block px-2.5 py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="1" required>
                       </div>
                       <button class="inline-flex items-center justify-center h-6 w-6 p-1 ms-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                           <span class="sr-only">Quantity button</span>
                           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
                           </svg>
                       </button>
                   </div>
               </td>
               <td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
                   $999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
               </td>
           </tr>
       </tbody>
   </table>
 </div>

checkbox	Name	Position	Status	Action
checkbox	Neil Sims neil.sims@flowbite.com	React Developer	Online	Edit user
checkbox	Bonnie Green bonnie@flowbite.com	Designer	Online	Edit user
checkbox	Jese Leos jese@flowbite.com	Vue JS Developer	Online	Edit user
checkbox	Thomas Lean thomes@flowbite.com	UI/UX Engineer	Online	Edit user
checkbox	Leslie Livingston leslie@flowbite.com	SEO Specialist	Offline	Edit user

                      
 <div class="flex items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 py-4 bg-white dark:bg-gray-900">
   <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
     <div>
         <button id="dropdownActionButton" data-dropdown-toggle="dropdownAction" class="inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
             <span class="sr-only">Action button</span>
             Action
             <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
             </svg>
         </button>
         <!-- Dropdown menu -->
         <div id="dropdownAction" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
             <ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownActionButton">
                 <li>
                     <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Reward</a>
                 </li>
                 <li>
                     <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Promote</a>
                 </li>
                 <li>
                     <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Activate account</a>
                 </li>
             </ul>
             <div class="py-1">
                 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delete User</a>
             </div>
         </div>
     </div>
     <label for="table-search" class="sr-only">Search</label>
     <div class="relative">
         <div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
             <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
             </svg>
         </div>
         <input type="text" id="table-search-users" class="block pt-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for users">
     </div>
 </div>
 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
     <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
         <tr>
             <th scope="col" class="p-4">
                 <div class="flex items-center">
                     <input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-all-search" class="sr-only">checkbox</label>
                 </div>
             </th>
             <th scope="col" class="px-6 py-3">
                 Name
             </th>
             <th scope="col" class="px-6 py-3">
                 Position
             </th>
             <th scope="col" class="px-6 py-3">
                 Status
             </th>
             <th scope="col" class="px-6 py-3">
                 Action
             </th>
         </tr>
     </thead>
     <tbody>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
                 </div>
             </td>
             <th scope="row" class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                 <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
                 <div class="ps-3">
                     <div class="text-base font-semibold">Neil Sims</div>
                     <div class="font-normal text-gray-500">neil.sims@flowbite.com</div>
                 </div>  
             </th>
             <td class="px-6 py-4">
                 React Developer
             </td>
             <td class="px-6 py-4">
                 <div class="flex items-center">
                     <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Online
                 </div>
             </td>
             <td class="px-6 py-4">
                 <!-- Modal toggle -->
                 <a href="#" type="button" data-modal-target="editUserModal" data-modal-show="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
             </td>
         </tr>
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <td class="w-4 p-4">
                 <div class="flex items-center">
                     <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     </div>
                     <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                 <th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
             </td>
             <div class="ps-3">
                 <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
                 <div class="font-normal text-gray-500">bonnie@flowbite.com</div>
                     <div class="text-base font-semibold">Bonnie Green</div>
                     </th>
                 </div>
             Designer
             <td class="px-6 py-4">
                 <td class="px-6 py-4">
             </td>
             <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Online
                 <div class="flex items-center">
                     </td>
                 </div>
             <!-- Modal toggle -->
             <td class="px-6 py-4">
                 </td>
                 <a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
             <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
         </tr>
         <div class="flex items-center">
             <td class="w-4 p-4">
                 <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                     <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     </td>
                 </div>
             <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
             <th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 <div class="text-base font-semibold">Jese Leos</div>
                 <div class="ps-3">
                     </div>
                     <div class="font-normal text-gray-500">jese@flowbite.com</div>
                 <td class="px-6 py-4">
             </th>
             </td>
                 Vue JS Developer
             <div class="flex items-center">
             <td class="px-6 py-4">
                 </div>
                     <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Online
                 <td class="px-6 py-4">
             </td>
             <a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
                 <!-- Modal toggle -->
                 </tr>
             </td>
         <td class="w-4 p-4">
         <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
             <input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                 <div class="flex items-center">
                     </div>
                     <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
                 <th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
             </td>
             <div class="ps-3">
                 <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
                 <div class="font-normal text-gray-500">thomes@flowbite.com</div>
                     <div class="text-base font-semibold">Thomas Lean</div>
                     </th>
                 </div>
             UI/UX Engineer
             <td class="px-6 py-4">
                 <td class="px-6 py-4">
             </td>
             <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Online
                 <div class="flex items-center">
                     </td>
                 </div>
             <!-- Modal toggle -->
             <td class="px-6 py-4">
                 </td>
                 <a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
             <tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
         </tr>
         <div class="flex items-center">
             <td class="w-4 p-4">
                 <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
                     <input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                     </td>
                 </div>
             <img class="w-10 h-10 rounded-full" src="https://dummyimage.com/50x50" alt="Jese image">
             <th scope="row" class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 <div class="text-base font-semibold">Leslie Livingston</div>
                 <div class="ps-3">
                     </div>
                     <div class="font-normal text-gray-500">leslie@flowbite.com</div>
                 <td class="px-6 py-4">
             </th>
             </td>
                 SEO Specialist
             <div class="flex items-center">
             <td class="px-6 py-4">
                 </div>
                     <div class="h-2.5 w-2.5 rounded-full bg-red-500 me-2"></div> Offline
                 <td class="px-6 py-4">
             </td>
             <a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
                 <!-- Modal toggle -->
                 </tr>
             </td>
         </table>
     </tbody>
 <div id="editUserModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 items-center justify-center hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
 <!-- Edit user modal -->
 <!-- Modal content -->
     <div class="relative w-full max-w-2xl max-h-full">
         <!-- Modal header -->
         <form class="relative bg-white rounded-lg shadow dark:bg-gray-700">
             <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
             <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                 </h3>
                     Edit user
                 <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="editUserModal">
                 </svg>
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                 </button>
                 <span class="sr-only">Close modal</span>
             <!-- Modal body -->
             </div>
             <div class="grid grid-cols-6 gap-6">
             <div class="p-6 space-y-6">
                 <label for="first-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">First Name</label>
                     <div class="col-span-6 sm:col-span-3">
                         </div>
                         <input type="text" name="first-name" id="first-name" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Bonnie" required="">
                     <label for="last-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Last Name</label>
                     <div class="col-span-6 sm:col-span-3">
                         </div>
                         <input type="text" name="last-name" id="last-name" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Green" required="">
                     <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
                     <div class="col-span-6 sm:col-span-3">
                         </div>
                         <input type="email" name="email" id="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="example@company.com" required="">
                     <label for="phone-number" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone Number</label>
                     <div class="col-span-6 sm:col-span-3">
                         </div>
                         <input type="number" name="phone-number" id="phone-number" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. +(12)3456 789" required="">
                     <label for="department" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Department</label>
                     <div class="col-span-6 sm:col-span-3">
                         </div>
                         <input type="text" name="department" id="department" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Development" required="">
                     <label for="company" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Company</label>
                     <div class="col-span-6 sm:col-span-3">
                         </div>
                         <input type="number" name="company" id="company" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="123456" required="">
                     <label for="current-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Current Password</label>
                     <div class="col-span-6 sm:col-span-3">
                         </div>
                         <input type="password" name="current-password" id="current-password" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="••••••••" required="">
                     <label for="new-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">New Password</label>
                     <div class="col-span-6 sm:col-span-3">
                         </div>
                         <input type="password" name="new-password" id="new-password" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="••••••••" required="">
                     </div>
                 </div>
             <div class="flex items-center p-6 space-x-3 rtl:space-x-reverse border-t border-gray-200 rounded-b dark:border-gray-600">
             <!-- Modal footer -->
             </div>
                 <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save all</button>
             </div>
         </form>
     </div>     
 </div>

Tailwind CSS code

Community Edition

Developer Edition

Designer Edition

Basic components (view all)

Application UI (view demo)

Marketing UI pre-order

E-commerce UI pre-order

Buy now

                      
 <div id="detailed-pricing" class="w-full overflow-x-auto">
    <div class="overflow-hidden min-w-max">
        <div class="grid grid-cols-4 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-t border-b border-gray-200 gap-x-16 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
            <div class="flex items-center">Tailwind CSS code</div>
            <div>Community Edition</div>
            <div>Developer Edition</div>
            <div>Designer Edition</div>
        </div>
        <div class="grid grid-cols-4 px-4 py-5 text-sm text-gray-700 border-b border-gray-200 gap-x-16 dark:border-gray-700">
            <div class="text-gray-500 dark:text-gray-400">Basic components (<a href="#" class="text-blue-600 hover:underline">view all</a>)</div>
            <div>
                <svg class="w-3 h-3 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                </svg>
            </div>
            <div>
                <svg class="w-3 h-3 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                </svg>
            </div>
            <div>
                <svg class="w-3 h-3 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                </svg>
            </div>
        </div>
        <div class="grid grid-cols-4 px-4 py-5 text-sm text-gray-700 border-b border-gray-200 gap-x-16 dark:border-gray-700">
            <div class="text-gray-500 dark:text-gray-400">Application UI (<a href="#" class="text-blue-600 hover:underline">view demo</a>)</div>
            <div>
                <svg class="w-3 h-3 text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
            </div>
            <div>
                <svg class="w-3 h-3 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                </svg>
            </div>
            <div>
                <svg class="w-3 h-3 text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
            </div>
        </div>
        <div class="grid grid-cols-4 px-4 py-5 text-sm text-gray-700 border-b border-gray-200 gap-x-16 dark:border-gray-700">
            <div class="text-gray-500 dark:text-gray-400">Marketing UI pre-order</div>
            <div>
                <svg class="w-3 h-3 text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
            </div>
            <div>
                <svg class="w-3 h-3 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                </svg>
            </div>
            <div>
                <svg class="w-3 h-3 text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
            </div>
        </div>
        <div class="grid grid-cols-4 px-4 py-5 text-sm text-gray-700 border-b border-gray-200 gap-x-16 dark:border-gray-700">
            <div class="text-gray-500 dark:text-gray-400">E-commerce UI pre-order</div>
            <div>
                <svg class="w-3 h-3 text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
            </div>
            <div>
                <svg class="w-3 h-3 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                </svg>
            </div>
            <div>
                <svg class="w-3 h-3 text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
            </div>
        </div>
        <div class="grid grid-cols-4 px-4 py-5 text-sm text-gray-700 border-b border-gray-200 gap-x-16 dark:border-gray-700">
            <div class="text-gray-500 dark:text-gray-400"></div>
            <div>
                <a href="#" class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900">Buy now</a>
            </div>
            <div>
                <a href="#" class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900">Buy now</a>
            </div>
            <div>
                <a href="#" class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900">Buy now</a>
            </div>
        </div>
    </div>
 </div>

Product name	Color	Category	Price	Action
Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit
Google Pixel Phone	Gray	Phone	$799	Edit
Apple Watch 5	Red	Wearables	$999	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
   <table class="w-full text-sm text-left rtl:text-right text-blue-100 dark:text-blue-100">
       <thead class="text-xs text-white uppercase bg-blue-600 dark:text-white">
           <tr>
               <th scope="col" class="px-6 py-3">
                   Product name
               </th>
               <th scope="col" class="px-6 py-3">
                   Color
               </th>
               <th scope="col" class="px-6 py-3">
                   Category
               </th>
               <th scope="col" class="px-6 py-3">
                   Price
               </th>
               <th scope="col" class="px-6 py-3">
                   Action
               </th>
           </tr>
       </thead>
       <tbody>
           <tr class="bg-blue-500 border-b border-blue-400">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Apple MacBook Pro 17"
               </th>
               <td class="px-6 py-4">
                   Silver
               </td>
               <td class="px-6 py-4">
                   Laptop
               </td>
               <td class="px-6 py-4">
                   $2999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-blue-500 border-b border-blue-400">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Microsoft Surface Pro
               </th>
               <td class="px-6 py-4">
                   White
               </td>
               <td class="px-6 py-4">
                   Laptop PC
               </td>
               <td class="px-6 py-4">
                   $1999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-blue-500 border-b border-blue-400">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Magic Mouse 2
               </th>
               <td class="px-6 py-4">
                   Black
               </td>
               <td class="px-6 py-4">
                   Accessories
               </td>
               <td class="px-6 py-4">
                   $99
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-blue-500 border-b border-blue-400">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Google Pixel Phone
               </th>
               <td class="px-6 py-4">
                   Gray
               </td>
               <td class="px-6 py-4">
                   Phone
               </td>
               <td class="px-6 py-4">
                   $799
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-blue-500 border-blue-40">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Apple Watch 5
               </th>
               <td class="px-6 py-4">
                   Red
               </td>
               <td class="px-6 py-4">
                   Wearables
               </td>
               <td class="px-6 py-4">
                   $999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
       </tbody>
   </table>
 </div>

Product name	Color	Category	Price	Action
Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit
Google Pixel Phone	Gray	Phone	$799	Edit
Apple Watch 5	Red	Wearables	$999	Edit

                      
 <table class="w-full text-sm text-left rtl:text-right text-blue-100 dark:text-blue-100">
   <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
     <thead class="text-xs text-white uppercase bg-blue-600 dark:text-white">
         <tr>
             <th scope="col" class="px-6 py-3">
                 Product name
             </th>
             <th scope="col" class="px-6 py-3">
                 Color
             </th>
             <th scope="col" class="px-6 py-3">
                 Category
             </th>
             <th scope="col" class="px-6 py-3">
                 Price
             </th>
             <th scope="col" class="px-6 py-3">
                 Action
             </th>
         </tr>
     </thead>
     <tbody>
         <tr class="bg-blue-500 border-b border-blue-400">
             <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                 Apple MacBook Pro 17"
             </th>
             <td class="px-6 py-4">
                 Silver
             </td>
             <td class="px-6 py-4">
                 Laptop
             </td>
             <td class="px-6 py-4">
                 $2999
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-white hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-blue-600 border-b border-blue-400">
             <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                 Microsoft Surface Pro
             </th>
             <td class="px-6 py-4">
                 White
             </td>
             <td class="px-6 py-4">
                 Laptop PC
             </td>
             <td class="px-6 py-4">
                 $1999
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-white hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-blue-500 border-b border-blue-400">
             <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                 Magic Mouse 2
             </th>
             <td class="px-6 py-4">
                 Black
             </td>
             <td class="px-6 py-4">
                 Accessories
             </td>
             <td class="px-6 py-4">
                 $99
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-white hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-blue-600 border-b border-blue-400">
             <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                 Google Pixel Phone
             </th>
             <td class="px-6 py-4">
                 Gray
             </td>
             <td class="px-6 py-4">
                 Phone
             </td>
             <td class="px-6 py-4">
                 $799
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-white hover:underline">Edit</a>
             </td>
         </tr>
         <tr class="bg-blue-500 border-blue-40">
             <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                 Apple Watch 5
             </th>
             <td class="px-6 py-4">
                 Red
             </td>
             <td class="px-6 py-4">
                 Wearables
             </td>
             <td class="px-6 py-4">
                 $999
             </td>
             <td class="px-6 py-4">
                 <a href="#" class="font-medium text-white hover:underline">Edit</a>
             </td>
         </tr>
     </tbody>
   </table>
 </div>

Product name	Color	Category	Price	Action
Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit
Google Pixel Phone	Gray	Phone	$799	Edit
Apple Watch 5	Red	Wearables	$999	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-blue-100 dark:text-blue-100">
        <thead class="text-xs text-white uppercase bg-blue-600 border-b border-blue-400 dark:text-white">
            <tr>
                <th scope="col" class="px-6 py-3 bg-blue-500">
                    Product name
                </th>
                <th scope="col" class="px-6 py-3">
                    Color
                </th>
                <th scope="col" class="px-6 py-3 bg-blue-500">
                    Category
                </th>
                <th scope="col" class="px-6 py-3">
                    Price
                </th>
                <th scope="col" class="px-6 py-3 bg-blue-500">
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-blue-600 border-b border-blue-400">
                <th scope="row" class="px-6 py-4 font-medium bg-blue-500 text-blue-50 whitespace-nowrap dark:text-blue-100">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">
                    Silver
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    Laptop
                </td>
                <td class="px-6 py-4">
                    $2999
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    <a href="#" class="font-medium text-white hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-blue-600 border-b border-blue-400">
                <th scope="row" class="px-6 py-4 font-medium bg-blue-500 text-blue-50 whitespace-nowrap dark:text-blue-100">
                    Microsoft Surface Pro
                </th>
                <td class="px-6 py-4">
                    White
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    Laptop PC
                </td>
                <td class="px-6 py-4">
                    $1999
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    <a href="#" class="font-medium text-white hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-blue-600 border-b border-blue-400">
                <th scope="row" class="px-6 py-4 font-medium bg-blue-500 text-blue-50 whitespace-nowrap dark:text-blue-100">
                    Magic Mouse 2
                </th>
                <td class="px-6 py-4">
                    Black
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    Accessories
                </td>
                <td class="px-6 py-4">
                    $99
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    <a href="#" class="font-medium text-white hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-blue-600 border-b border-blue-400">
                <th scope="row" class="px-6 py-4 font-medium bg-blue-500 text-blue-50 whitespace-nowrap dark:text-blue-100">
                    Google Pixel Phone
                </th>
                <td class="px-6 py-4">
                    Gray
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    Phone
                </td>
                <td class="px-6 py-4">
                    $799
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    <a href="#" class="font-medium text-white hover:underline">Edit</a>
                </td>
            </tr>
            <tr class="bg-blue-600 border-blue-40">
                <th scope="row" class="px-6 py-4 font-medium bg-blue-500 text-blue-50 whitespace-nowrap dark:text-blue-100">
                    Apple Watch 5
                </th>
                <td class="px-6 py-4">
                    Red
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    Wearables
                </td>
                <td class="px-6 py-4">
                    $999
                </td>
                <td class="px-6 py-4 bg-blue-500">
                    <a href="#" class="font-medium text-white hover:underline">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
 </div>

Product name	Color	Category	Price	Action
Apple MacBook Pro 17"	Silver	Laptop	$2999	Edit
Microsoft Surface Pro	White	Laptop PC	$1999	Edit
Magic Mouse 2	Black	Accessories	$99	Edit
Google Pixel Phone	Gray	Phone	$799	Edit
Apple Watch 5	Red	Wearables	$999	Edit

                      
 <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
   <table class="w-full text-sm text-left rtl:text-right text-blue-100 dark:text-blue-100">
       <thead class="text-xs text-white uppercase bg-blue-600 border-b border-blue-400 dark:text-white">
           <tr>
               <th scope="col" class="px-6 py-3">
                   Product name
               </th>
               <th scope="col" class="px-6 py-3">
                   Color
               </th>
               <th scope="col" class="px-6 py-3">
                   Category
               </th>
               <th scope="col" class="px-6 py-3">
                   Price
               </th>
               <th scope="col" class="px-6 py-3">
                   Action
               </th>
           </tr>
       </thead>
       <tbody>
           <tr class="bg-blue-600 border-b border-blue-400 hover:bg-blue-500">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Apple MacBook Pro 17"
               </th>
               <td class="px-6 py-4">
                   Silver
               </td>
               <td class="px-6 py-4">
                   Laptop
               </td>
               <td class="px-6 py-4">
                   $2999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-blue-600 border-b border-blue-400 hover:bg-blue-500">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Microsoft Surface Pro
               </th>
               <td class="px-6 py-4">
                   White
               </td>
               <td class="px-6 py-4">
                   Laptop PC
               </td>
               <td class="px-6 py-4">
                   $1999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-blue-600 border-b border-blue-400 hover:bg-blue-500">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Magic Mouse 2
               </th>
               <td class="px-6 py-4">
                   Black
               </td>
               <td class="px-6 py-4">
                   Accessories
               </td>
               <td class="px-6 py-4">
                   $99
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-blue-600 border-b border-blue-400 hover:bg-blue-500">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Google Pixel Phone
               </th>
               <td class="px-6 py-4">
                   Gray
               </td>
               <td class="px-6 py-4">
                   Phone
               </td>
               <td class="px-6 py-4">
                   $799
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
           <tr class="bg-blue-600 border-blue-400 hover:bg-blue-500">
               <th scope="row" class="px-6 py-4 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
                   Apple Watch 5
               </th>
               <td class="px-6 py-4">
                   Red
               </td>
               <td class="px-6 py-4">
                   Wearables
               </td>
               <td class="px-6 py-4">
                   $999
               </td>
               <td class="px-6 py-4">
                   <a href="#" class="font-medium text-white hover:underline">Edit</a>
               </td>
           </tr>
       </tbody>
   </table>
 </div>

#	First name	Last name	Username
1	Jean Marc	Louis	Jl987
2	Eric	Prouve	prouveE
3	Julien	Clai	CJUL87
4	Igor	Louth	IGL89_9

                      
 <table class="table p-4 bg-white rounded-lg shadow">
   <thead>
       <tr>
           <th class="border-b-2 p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900">
               #
           </th>
           <th class="border-b-2 p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900">
               First name
           </th>
           <th class="border-b-2 p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900">
               Last name
           </th>
           <th class="border-b-2 p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900">
               Username
           </th>
       </tr>
   </thead>
   <tbody>
       <tr class="text-gray-700">
           <td class="border-b-2 p-4 dark:border-dark-5">
               1
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               Jean Marc
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               Louis
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               Jl987
           </td>
       </tr>
       <tr class="text-gray-700">
           <td class="border-b-2 p-4 dark:border-dark-5">
               2
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               Eric
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               Prouve
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               prouveE
           </td>
       </tr>
       <tr class="text-gray-700">
           <td class="border-b-2 p-4 dark:border-dark-5">
               3
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               Julien
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               Clai
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               CJUL87
           </td>
       </tr>
       <tr class="text-gray-700">
           <td class="border-b-2 p-4 dark:border-dark-5">
               4
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               Igor
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               Louth
           </td>
           <td class="border-b-2 p-4 dark:border-dark-5">
               IGL89_9
           </td>
       </tr>
   </tbody>
 </table>

#	First name	Last name	Username
1	Jean Marc	Louis	Jl987
2	Eric	Prouve	prouveE
3	Julien	Clai	CJUL87
4	Igor	Louth	IGL89_9

                      
 <table class="table p-4 bg-white rounded-lg shadow">
    <thead>
        <tr>
            <th class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900">
                #
            </th>
            <th class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900">
                First name
            </th>
            <th class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900">
                Last name
            </th>
            <th class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900">
                Username
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="text-gray-700">
            <td class="border p-4 dark:border-dark-5">
                1
            </td>
            <td class="border p-4 dark:border-dark-5">
                Jean Marc
            </td>
            <td class="border p-4 dark:border-dark-5">
                Louis
            </td>
            <td class="border p-4 dark:border-dark-5">
                Jl987
            </td>
        </tr>
        <tr class="text-gray-700">
            <td class="border p-4 dark:border-dark-5">
                2
            </td>
            <td class="border p-4 dark:border-dark-5">
                Eric
            </td>
            <td class="border p-4 dark:border-dark-5">
                Prouve
            </td>
            <td class="border p-4 dark:border-dark-5">
                prouveE
            </td>
        </tr>
        <tr class="text-gray-700">
            <td class="border p-4 dark:border-dark-5">
                3
            </td>
            <td class="border p-4 dark:border-dark-5">
                Julien
            </td>
            <td class="border p-4 dark:border-dark-5">
                Clai
            </td>
            <td class="border p-4 dark:border-dark-5">
                CJUL87
            </td>
        </tr>
        <tr class="text-gray-700">
            <td class="border p-4 dark:border-dark-5">
                4
            </td>
            <td class="border p-4 dark:border-dark-5">
                Igor
            </td>
            <td class="border p-4 dark:border-dark-5">
                Louth
            </td>
            <td class="border p-4 dark:border-dark-5">
                IGL89_9
            </td>
        </tr>
    </tbody>
 </table>

User	Role	Created at	status
Jean marc	Admin	12/09/2020	active
Marcus coco	Designer	01/10/2012	active
Ecric marc	Developer	02/10/2018	active
Julien Huger	User	23/09/2010	active

                      
 <div class="container max-w-3xl px-4 mx-auto sm:px-8">
   <div class="py-8">
       <div class="px-4 py-4 -mx-4 overflow-x-auto sm:-mx-8 sm:px-8">
           <div class="inline-block min-w-full overflow-hidden rounded-lg shadow">
               <table class="min-w-full leading-normal">
                   <thead>
                       <tr>
                           <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                               User
                           </th>
                           <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                               Role
                           </th>
                           <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                               Created at
                           </th>
                           <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                               status
                           </th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <div class="flex items-center">
                                   <div class="flex-shrink-0">
                                       <a href="#" class="relative block">
                                           <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                       </a>
                                   </div>
                                   <div class="ml-3">
                                       <p class="text-gray-900 whitespace-no-wrap">
                                           Jean marc
                                       </p>
                                   </div>
                               </div>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   Admin
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   12/09/2020
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                   <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                   </span>
                                   <span class="relative">
                                       active
                                   </span>
                               </span>
                           </td>
                       </tr>
                       <tr>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <div class="flex items-center">
                                   <div class="flex-shrink-0">
                                       <a href="#" class="relative block">
                                           <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                       </a>
                                   </div>
                                   <div class="ml-3">
                                       <p class="text-gray-900 whitespace-no-wrap">
                                           Marcus coco
                                       </p>
                                   </div>
                               </div>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   Designer
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   01/10/2012
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                   <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                   </span>
                                   <span class="relative">
                                       active
                                   </span>
                               </span>
                           </td>
                       </tr>
                       <tr>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <div class="flex items-center">
                                   <div class="flex-shrink-0">
                                       <a href="#" class="relative block">
                                           <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                       </a>
                                   </div>
                                   <div class="ml-3">
                                       <p class="text-gray-900 whitespace-no-wrap">
                                           Ecric marc
                                       </p>
                                   </div>
                               </div>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   Developer
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   02/10/2018
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                   <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                   </span>
                                   <span class="relative">
                                       active
                                   </span>
                               </span>
                           </td>
                       </tr>
                       <tr>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <div class="flex items-center">
                                   <div class="flex-shrink-0">
                                       <a href="#" class="relative block">
                                           <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                       </a>
                                   </div>
                                   <div class="ml-3">
                                       <p class="text-gray-900 whitespace-no-wrap">
                                           Julien Huger
                                       </p>
                                   </div>
                               </div>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   User
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   23/09/2010
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                   <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                   </span>
                                   <span class="relative">
                                       active
                                   </span>
                               </span>
                           </td>
                       </tr>
                   </tbody>
               </table>
               <div class="flex flex-col items-center px-5 py-5 bg-white xs:flex-row xs:justify-between">
                   <div class="flex items-center">
                       <button type="button" class="w-full p-4 text-base text-gray-600 bg-white border rounded-l-xl hover:bg-gray-100">
                           <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                               <path d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z">
                               </path>
                           </svg>
                       </button>
                       <button type="button" class="w-full px-4 py-2 text-base text-indigo-500 bg-white border-t border-b hover:bg-gray-100 ">
                           1
                       </button>
                       <button type="button" class="w-full px-4 py-2 text-base text-gray-600 bg-white border hover:bg-gray-100">
                           2
                       </button>
                       <button type="button" class="w-full px-4 py-2 text-base text-gray-600 bg-white border-t border-b hover:bg-gray-100">
                           3
                       </button>
                       <button type="button" class="w-full px-4 py-2 text-base text-gray-600 bg-white border hover:bg-gray-100">
                           4
                       </button>
                       <button type="button" class="w-full p-4 text-base text-gray-600 bg-white border-t border-b border-r rounded-r-xl hover:bg-gray-100">
                           <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                               <path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z">
                               </path>
                           </svg>
                       </button>
                   </div>
               </div>
           </div>
       </div>
   </div>
 </div>

User	Role	Created at	status
Jean marc	Admin	12/09/2020	active	Edit
Marcus coco	Designer	01/10/2012	active	Edit
Ecric marc	Developer	02/10/2018	active	Edit
Julien Huger	User	23/09/2010	active	Edit

                      
 <div class="container max-w-3xl px-4 mx-auto sm:px-8">
   <div class="py-8">
       <div class="px-4 py-4 -mx-4 overflow-x-auto sm:-mx-8 sm:px-8">
           <div class="inline-block min-w-full overflow-hidden rounded-lg shadow">
               <table class="min-w-full leading-normal">
                   <thead>
                       <tr>
                           <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                               User
                           </th>
                           <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                               Role
                           </th>
                           <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                               Created at
                           </th>
                           <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                               status
                           </th>
                           <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                           </th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <div class="flex items-center">
                                   <div class="flex-shrink-0">
                                       <a href="#" class="relative block">
                                           <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                       </a>
                                   </div>
                                   <div class="ml-3">
                                       <p class="text-gray-900 whitespace-no-wrap">
                                           Jean marc
                                       </p>
                                   </div>
                               </div>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   Admin
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   12/09/2020
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                   <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                   </span>
                                   <span class="relative">
                                       active
                                   </span>
                               </span>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                   Edit
                               </a>
                           </td>
                       </tr>
                       <tr>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <div class="flex items-center">
                                   <div class="flex-shrink-0">
                                       <a href="#" class="relative block">
                                           <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                       </a>
                                   </div>
                                   <div class="ml-3">
                                       <p class="text-gray-900 whitespace-no-wrap">
                                           Marcus coco
                                       </p>
                                   </div>
                               </div>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   Designer
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   01/10/2012
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                   <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                   </span>
                                   <span class="relative">
                                       active
                                   </span>
                               </span>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                   Edit
                               </a>
                           </td>
                       </tr>
                       <tr>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <div class="flex items-center">
                                   <div class="flex-shrink-0">
                                       <a href="#" class="relative block">
                                           <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                       </a>
                                   </div>
                                   <div class="ml-3">
                                       <p class="text-gray-900 whitespace-no-wrap">
                                           Ecric marc
                                       </p>
                                   </div>
                               </div>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   Developer
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   02/10/2018
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                   <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                   </span>
                                   <span class="relative">
                                       active
                                   </span>
                               </span>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                   Edit
                               </a>
                           </td>
                       </tr>
                       <tr>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <div class="flex items-center">
                                   <div class="flex-shrink-0">
                                       <a href="#" class="relative block">
                                           <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                       </a>
                                   </div>
                                   <div class="ml-3">
                                       <p class="text-gray-900 whitespace-no-wrap">
                                           Julien Huger
                                       </p>
                                   </div>
                               </div>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   User
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <p class="text-gray-900 whitespace-no-wrap">
                                   23/09/2010
                               </p>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                   <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                   </span>
                                   <span class="relative">
                                       active
                                   </span>
                               </span>
                           </td>
                           <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                               <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                   Edit
                               </a>
                           </td>
                       </tr>
                   </tbody>
               </table>
               <div class="flex flex-col items-center px-5 py-5 bg-white xs:flex-row xs:justify-between">
                   <div class="flex items-center">
                       <button type="button" class="w-full p-4 text-base text-gray-600 bg-white border rounded-l-xl hover:bg-gray-100">
                           <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                               <path d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z">
                               </path>
                           </svg>
                       </button>
                       <button type="button" class="w-full px-4 py-2 text-base text-indigo-500 bg-white border-t border-b hover:bg-gray-100 ">
                           1
                       </button>
                       <button type="button" class="w-full px-4 py-2 text-base text-gray-600 bg-white border hover:bg-gray-100">
                           2
                       </button>
                       <button type="button" class="w-full px-4 py-2 text-base text-gray-600 bg-white border-t border-b hover:bg-gray-100">
                           3
                       </button>
                       <button type="button" class="w-full px-4 py-2 text-base text-gray-600 bg-white border hover:bg-gray-100">
                           4
                       </button>
                       <button type="button" class="w-full p-4 text-base text-gray-600 bg-white border-t border-b border-r rounded-r-xl hover:bg-gray-100">
                           <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                               <path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z">
                               </path>
                           </svg>
                       </button>
                   </div>
               </div>
           </div>
       </div>
   </div>
 </div>

Users

User	Role	Created at	status
Jean marc	Admin	12/09/2020	active	Edit
Marcus coco	Designer	01/10/2012	active	Edit
Ecric marc	Developer	02/10/2018	active	Edit
Julien Huger	User	23/09/2010	active	Edit

                      
 <div class="container max-w-3xl px-4 mx-auto sm:px-8">
   <div class="py-8">
       <div class="flex flex-row justify-between w-full mb-1 sm:mb-0">
           <h2 class="text-2xl leading-tight">
               Users
           </h2>
           <div class="text-end">
               <form class="flex flex-col justify-center w-3/4 max-w-sm space-y-3 md:flex-row md:w-full md:space-x-3 md:space-y-0">
                   <div class=" relative ">
                       <input type="text" id="&quot;form-subscribe-Filter" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="name"/>
                       </div>
                       <button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
                           Filter
                       </button>
                   </form>
               </div>
           </div>
           <div class="px-4 py-4 -mx-4 overflow-x-auto sm:-mx-8 sm:px-8">
               <div class="inline-block min-w-full overflow-hidden rounded-lg shadow">
                   <table class="min-w-full leading-normal">
                       <thead>
                           <tr>
                               <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                                   User
                               </th>
                               <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                                   Role
                               </th>
                               <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                                   Created at
                               </th>
                               <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                                   status
                               </th>
                               <th scope="col" class="px-5 py-3 text-sm font-normal text-left text-gray-800 uppercase bg-white border-b border-gray-200">
                               </th>
                           </tr>
                       </thead>
                       <tbody>
                           <tr>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <div class="flex items-center">
                                       <div class="flex-shrink-0">
                                           <a href="#" class="relative block">
                                               <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                           </a>
                                       </div>
                                       <div class="ml-3">
                                           <p class="text-gray-900 whitespace-no-wrap">
                                               Jean marc
                                           </p>
                                       </div>
                                   </div>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <p class="text-gray-900 whitespace-no-wrap">
                                       Admin
                                   </p>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <p class="text-gray-900 whitespace-no-wrap">
                                       12/09/2020
                                   </p>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                       <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                       </span>
                                       <span class="relative">
                                           active
                                       </span>
                                   </span>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                       Edit
                                   </a>
                               </td>
                           </tr>
                           <tr>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <div class="flex items-center">
                                       <div class="flex-shrink-0">
                                           <a href="#" class="relative block">
                                               <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                           </a>
                                       </div>
                                       <div class="ml-3">
                                           <p class="text-gray-900 whitespace-no-wrap">
                                               Marcus coco
                                           </p>
                                       </div>
                                   </div>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <p class="text-gray-900 whitespace-no-wrap">
                                       Designer
                                   </p>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <p class="text-gray-900 whitespace-no-wrap">
                                       01/10/2012
                                   </p>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                       <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                       </span>
                                       <span class="relative">
                                           active
                                       </span>
                                   </span>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                       Edit
                                   </a>
                               </td>
                           </tr>
                           <tr>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <div class="flex items-center">
                                       <div class="flex-shrink-0">
                                           <a href="#" class="relative block">
                                               <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                           </a>
                                       </div>
                                       <div class="ml-3">
                                           <p class="text-gray-900 whitespace-no-wrap">
                                               Ecric marc
                                           </p>
                                       </div>
                                   </div>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <p class="text-gray-900 whitespace-no-wrap">
                                       Developer
                                   </p>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <p class="text-gray-900 whitespace-no-wrap">
                                       02/10/2018
                                   </p>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                       <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                       </span>
                                       <span class="relative">
                                           active
                                       </span>
                                   </span>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                       Edit
                                   </a>
                               </td>
                           </tr>
                           <tr>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <div class="flex items-center">
                                       <div class="flex-shrink-0">
                                           <a href="#" class="relative block">
                                               <img alt="profil" src="https://dummyimage.com/50x50" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                           </a>
                                       </div>
                                       <div class="ml-3">
                                           <p class="text-gray-900 whitespace-no-wrap">
                                               Julien Huger
                                           </p>
                                       </div>
                                   </div>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <p class="text-gray-900 whitespace-no-wrap">
                                       User
                                   </p>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <p class="text-gray-900 whitespace-no-wrap">
                                       23/09/2010
                                   </p>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <span class="relative inline-block px-3 py-1 font-semibold leading-tight text-green-900">
                                       <span aria-hidden="true" class="absolute inset-0 bg-green-200 rounded-full opacity-50">
                                       </span>
                                       <span class="relative">
                                           active
                                       </span>
                                   </span>
                               </td>
                               <td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
                                   <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                       Edit
                                   </a>
                               </td>
                           </tr>
                       </tbody>
                   </table>
                   <div class="flex flex-col items-center px-5 py-5 bg-white xs:flex-row xs:justify-between">
                       <div class="flex items-center">
                           <button type="button" class="w-full p-4 text-base text-gray-600 bg-white border rounded-l-xl hover:bg-gray-100">
                               <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                   <path d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z">
                                   </path>
                               </svg>
                           </button>
                           <button type="button" class="w-full px-4 py-2 text-base text-indigo-500 bg-white border-t border-b hover:bg-gray-100 ">
                               1
                           </button>
                           <button type="button" class="w-full px-4 py-2 text-base text-gray-600 bg-white border hover:bg-gray-100">
                               2
                           </button>
                           <button type="button" class="w-full px-4 py-2 text-base text-gray-600 bg-white border-t border-b hover:bg-gray-100">
                               3
                           </button>
                           <button type="button" class="w-full px-4 py-2 text-base text-gray-600 bg-white border hover:bg-gray-100">
                               4
                           </button>
                           <button type="button" class="w-full p-4 text-base text-gray-600 bg-white border-t border-b border-r rounded-r-xl hover:bg-gray-100">
                               <svg width="9" fill="currentColor" height="8" class="" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                   <path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z">
                                   </path>
                               </svg>
                           </button>
                       </div>
                   </div>
             </div>
        </div>
    </div>
 </div>