Documentation
Tables
Default Table
S.L Invoice Name Issued Date Amount
01 #526534 Kathryn Murphy 25 Jan 2024 $200.00
02 #696589 Annette Black 25 Jan 2024 $200.00
03 #256584 Ronald Richards 10 Feb 2024 $200.00
04 #526587 Eleanor Pena 10 Feb 2024 $150.00
05 #105986 Leslie Alexander 15 Mar 2024 $150.00 

<div class="table-responsive">
  <table class="table border-0 mb-0">
    <thead>
      <tr>
        <th class="!rounded-s-none">S.L</th>
        <th class="">Invoice</th>
        <th class="">Name</th>
        <th class="">Issued Date</th>
        <th class="!rounded-e-none">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="!border-b-0">01</td>
        <td class="!border-b-0">
          <a href="javascript:void(0)" class="text-primary-600">#526534</a>
        </td>
        <td class="!border-b-0">Kathryn Murphy</td>
        <td class="!border-b-0">25 Jan 2024</td>
        <td class="!border-b-0">$200.00</td>
      </tr>
      <tr>
        <td class="!border-b-0">02</td>
        <td class="!border-b-0">
          <a href="javascript:void(0)" class="text-primary-600">#696589</a>
        </td>
        <td class="!border-b-0">Annette Black</td>
        <td class="!border-b-0">25 Jan 2024</td>
        <td class="!border-b-0">$200.00</td>
      </tr>
      <tr>
        <td class="!border-b-0">03</td>
        <td class="!border-b-0">
          <a href="javascript:void(0)" class="text-primary-600">#256584</a>
        </td>
        <td class="!border-b-0">Ronald Richards</td>
        <td class="!border-b-0">10 Feb 2024</td>
        <td class="!border-b-0">$200.00</td>
      </tr>
      <tr>
        <td class="!border-b-0">04</td>
        <td class="!border-b-0">
          <a href="javascript:void(0)" class="text-primary-600">#526587</a>
        </td>
        <td class="!border-b-0">Eleanor Pena</td>
        <td class="!border-b-0">10 Feb 2024</td>
        <td class="!border-b-0">$150.00</td>
      </tr>
      <tr>
        <td class="!border-b-0">05</td>
        <td class="!border-b-0">
          <a href="javascript:void(0)" class="text-primary-600">#105986</a>
        </td>
        <td class="!border-b-0">Leslie Alexander</td>
        <td class="!border-b-0">15 Mar 2024</td>
        <td class="!border-b-0">$150.00</td>
      </tr>
    </tbody>
  </table>
</div>
Bordered Tables
Invoice Name Issued Date Amount Action
#526534 Kathryn Murphy 25 Jan 2024 $200.00 View More >
#696589 Annette Black 25 Jan 2024 $200.00 View More >
#256584 256584 10 Feb 2024 $200.00 View More >
#526587 Eleanor Pena 10 Feb 2024 $150.00 View More >
#105986 Leslie Alexander 15 Mar 2024 $150.00 View More > 

<div class="table-responsive">
  <table class="table basic-border-table mb-0">
    <thead>
      <tr>
        <th class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">Invoice </th>
        <th class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">Name</th>
        <th class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">Issued Date</th>
        <th class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">Amount</th>
        <th class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">#526534</a>
        </td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">Kathryn Murphy</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">25 Jan 2024</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">$200.00</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">View More ></a>
        </td>
      </tr>
      <tr>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">#696589</a>
        </td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">Annette Black</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">25 Jan 2024</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">$200.00</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">View More ></a>
        </td>
      </tr>
      <tr>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">#256584</a>
        </td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">256584</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">10 Feb 2024</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">$200.00</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">View More ></a>
        </td>
      </tr>
      <tr>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">#526587</a>
        </td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">Eleanor Pena</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">10 Feb 2024</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">$150.00</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">View More ></a>
        </td>
      </tr>
      <tr>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">#105986</a>
        </td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">Leslie Alexander</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">15 Mar 2024</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">$150.00</td>
        <td class="border-r border-neutral-200 dark:border-neutral-600 last:border-r-0">
          <a href="javascript:void(0)" class="text-primary-600">View More ></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Striped Rows
Items Price Discount Sold Total Orders
Blue t-shirt
Fashion
$500.00 15% 300 70
Nike Air Shoe
Fashion
$150.00 N/A 200 70
Woman Dresses
Fashion
$300.00 $50.00 1500 70
Smart Watch
Fashion
$400.00 $50.00 700 70
Hoodie Rose
Fashion
$300.00 25% 500 70 

<div class="table-responsive">
  <table class="table striped-table mb-0">
    <thead>
      <tr>
        <th scope="col" class="!bg-white dark:!bg-neutral-700 border-b border-neutral-200 dark:border-neutral-600">Items</th>
        <th scope="col" class="!bg-white dark:!bg-neutral-700 border-b border-neutral-200 dark:border-neutral-600">Price</th>
        <th scope="col" class="!bg-white dark:!bg-neutral-700 border-b border-neutral-200 dark:border-neutral-600">Discount </th>
        <th scope="col" class="!bg-white dark:!bg-neutral-700 border-b border-neutral-200 dark:border-neutral-600">Sold</th>
        <th scope="col" class="!bg-white dark:!bg-neutral-700 border-b border-neutral-200 dark:border-neutral-600 text-center">Total Orders</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
        <td>
          <div class="flex items-center">
            <img src="assets/images/product/product-img1.png" alt="" class="shrink-0 me-3 rounded-lg me-3">
            <div class="grow">
              <h6 class="text-base mb-0 font-normal">Blue t-shirt</h6>
              <span class="text-sm text-secondary-light font-normal">Fashion</span>
            </div>
          </div>
        </td>
        <td>$400.00</td>
        <td>15%</td>
        <td>300</td>
        <td class="text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
      <tr class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
        <td>
          <div class="flex items-center">
            <img src="assets/images/product/product-img2.png" alt="" class="shrink-0 me-3 rounded-lg me-3">
            <div class="grow">
              <h6 class="text-base mb-0 font-normal">Nike Air Shoe</h6>
              <span class="text-sm text-secondary-light font-normal">Fashion</span>
            </div>
          </div>
        </td>
        <td>$150.00</td>
        <td>N/A</td>
        <td>200</td>
        <td class="text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
      <tr class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
        <td>
          <div class="flex items-center">
            <img src="assets/images/product/product-img3.png" alt="" class="shrink-0 me-3 rounded-lg me-3">
            <div class="grow">
              <h6 class="text-base mb-0 font-normal">Woman Dresses</h6>
              <span class="text-sm text-secondary-light font-normal">Fashion</span>
            </div>
          </div>
        </td>
        <td>$300.00</td>
        <td>$50.00</td>
        <td>1400</td>
        <td class="text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
      <tr class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
        <td>
          <div class="flex items-center">
            <img src="assets/images/product/product-img4.png" alt="" class="shrink-0 me-3 rounded-lg me-3">
            <div class="grow">
              <h6 class="text-base mb-0 font-normal">Smart Watch</h6>
              <span class="text-sm text-secondary-light font-normal">Fashion</span>
            </div>
          </div>
        </td>
        <td>$400.00</td>
        <td>$50.00</td>
        <td>700</td>
        <td class="text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
      <tr class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
        <td>
          <div class="flex items-center">
            <img src="assets/images/product/product-img5.png" alt="" class="shrink-0 me-3 rounded-lg me-3">
            <div class="grow">
              <h6 class="text-base mb-0 font-normal">Hoodie Rose</h6>
              <span class="text-sm text-secondary-light font-normal">Fashion</span>
            </div>
          </div>
        </td>
        <td>$300.00</td>
        <td>25%</td>
        <td>400</td>
        <td class="text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Striped Column
Items Price Discount Sold Total Orders
Blue t-shirt
Fashion 		$500.00 15% 300 70
Blue t-shirt
Fashion 		$150.00 N/A 200 70
Blue t-shirt
Fashion 		$300.00 $50.00 1500 70
Blue t-shirt
Fashion 		$400.00 $50.00 700 70
Blue t-shirt
Fashion 		$300.00 25% 500 70 

<div class="table-responsive">
  <table class="table vertical-striped-table mb-0">
    <thead>
      <tr>
        <th scope="col" class="border-b border-neutral-200 dark:border-neutral-600">Items</th>
        <th scope="col" class="border-b border-neutral-200 dark:border-neutral-600">Price</th>
        <th scope="col" class="border-b border-neutral-200 dark:border-neutral-600">Discount </th>
        <th scope="col" class="border-b border-neutral-200 dark:border-neutral-600">Sold</th>
        <th scope="col" class="border-b border-neutral-200 dark:border-neutral-600 text-center">Total Orders</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
          <h6 class="text-base mb-0 font-normal">Blue t-shirt</h6>
          <span class="text-sm text-secondary-light font-normal">Fashion</span>
        </td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">$400.00</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">15%</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">300</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600 text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
      <tr>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
          <h6 class="text-base mb-0 font-normal">Blue t-shirt</h6>
          <span class="text-sm text-secondary-light font-normal">Fashion</span>
        </td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">$150.00</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">N/A</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">200</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600 text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
      <tr>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
          <h6 class="text-base mb-0 font-normal">Blue t-shirt</h6>
          <span class="text-sm text-secondary-light font-normal">Fashion</span>
        </td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">$300.00</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">$50.00</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">1400</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600 text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
      <tr>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
          <h6 class="text-base mb-0 font-normal">Blue t-shirt</h6>
          <span class="text-sm text-secondary-light font-normal">Fashion</span>
        </td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">$400.00</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">$50.00</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">700</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600 text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
      <tr>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">
          <h6 class="text-base mb-0 font-normal">Blue t-shirt</h6>
          <span class="text-sm text-secondary-light font-normal">Fashion</span>
        </td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">$300.00</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">25%</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600">400</td>
        <td class="odd:bg-neutral-100 dark:odd:bg-neutral-600 text-center">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">70</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Tables Border Colors
 Transaction ID Date Status Amount
5986124445445 27 Mar 2024 Pending $20,000.00
5986124445445 27 Mar 2024 Rejected $20,000.00
5986124445445 27 Mar 2024 Completed $20,000.00
5986124445445 27 Mar 2024 Completed $20,000.00
5986124445445 27 Mar 2024 Completed $20,000.00 

<div class="table-responsive">
  <table class="table border-primary-600 mb-0">
    <thead>
      <tr>
        <th scope="col" class="border-r border-b border-primary-600 last:border-r-0">
          <div class="flex items-center">
            <input id="sl" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-neutral-400 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="sl" class="ms-1.5 text-md font-medium text-gray-900 dark:text-gray-300">S.L</label>
          </div>
        </th>
        <th scope="col" class="border-r border-b border-primary-600 last:border-r-0">Transaction ID</th>
        <th scope="col" class="border-r border-b border-primary-600 last:border-r-0">Date</th>
        <th scope="col" class="border-r border-b border-primary-600 last:border-r-0">Status</th>
        <th scope="col" class="border-r border-b border-primary-600 last:border-r-0">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <div class="flex items-center">
            <input id="sl1" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-neutral-400 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="sl1" class="ms-1.5 text-md font-normal text-gray-600 dark:text-gray-300">S.L</label>
          </div>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">5986124445445</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">27 Mar 2024</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <span class="bg-warning-100 dark:bg-warning-600/25 text-warning-600 dark:text-warning-400 px-8 py-1.5 rounded-full font-medium text-sm">Pending</span>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">$20,000.00</td>
      </tr>
      <tr>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <div class="flex items-center">
            <input id="sl2" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-neutral-400 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="sl2" class="ms-1.5 text-md font-normal text-gray-600 dark:text-gray-300">S.L</label>
          </div>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">5986124445445</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">27 Mar 2024</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <span class="bg-danger-100 dark:bg-danger-600/25 text-danger-600 dark:text-danger-400 px-8 py-1.5 rounded-full font-medium text-sm">Rejected</span>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">$20,000.00</td>
      </tr>
      <tr>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <div class="flex items-center">
            <input id="sl3" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-neutral-400 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="sl3" class="ms-1.5 text-md font-normal text-gray-600 dark:text-gray-300">S.L</label>
          </div>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">5986124445445</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">27 Mar 2024</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">Completed</span>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">$20,000.00</td>
      </tr>
      <tr>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <div class="flex items-center">
            <input id="sl4" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-neutral-400 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="sl4" class="ms-1.5 text-md font-normal text-gray-600 dark:text-gray-300">S.L</label>
          </div>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">5986124445445</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">27 Mar 2024</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">Completed</span>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">$20,000.00</td>
      </tr>
      <tr>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <div class="flex items-center">
            <input id="sl5" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-neutral-400 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="sl5" class="ms-1.5 text-md font-normal text-gray-600 dark:text-gray-300">S.L</label>
          </div>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">5986124445445</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">27 Mar 2024</td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">
          <span class="bg-success-100 dark:bg-success-600/25 text-success-600 dark:text-success-400 px-8 py-1.5 rounded-full font-medium text-sm">Completed</span>
        </td>
        <td class="border-r border-b !border-primary-600 last:border-r-0">$20,000.00</td>
      </tr>
    </tbody>
  </table>
</div>
Tables Border Colors
Registered On Users Email Plan
27 Mar 2024
Dianne Russell
 random@gmail.com Free
27 Mar 2024
Wade Warren
 random@gmail.com Basic
27 Mar 2024
Albert Flores
 random@gmail.com Standard
27 Mar 2024
Bessie Cooper
 random@gmail.com Business
27 Mar 2024
Arlene McCoy
 random@gmail.com Enterprise 

<div class="table-responsive">
  <table class="table colored-row-table mb-0">
    <thead>
      <tr>
        <th scope="col" class="!bg-white dark:!bg-neutral-700">Registered On</th>
        <th scope="col" class="!bg-white dark:!bg-neutral-700">Users</th>
        <th scope="col" class="!bg-white dark:!bg-neutral-700">Email</th>
        <th scope="col" class="!bg-white dark:!bg-neutral-700">Plan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="bg-primary-50 dark:bg-primary-600/10">27 Mar 2024</td>
        <td class="bg-primary-50 dark:bg-primary-600/10">
          <div class="flex items-center">
            <img src="assets/images/users/user1.png" alt="" class="w-10 h-10 rounded-full shrink-0 me-2 overflow-hidden">
            <h6 class="text-base mb-0 font-medium grow">Dianne Russell</h6>
          </div>
        </td>
        <td class="bg-primary-50 dark:bg-primary-600/10">random@gmail.com</td>
        <td class="bg-primary-50 dark:bg-primary-600/10">Free</td>
      </tr>
      <tr>
        <td class="bg-success-100 dark:bg-success-600/10">27 Mar 2024</td>
        <td class="bg-success-100 dark:bg-success-600/10">
          <div class="flex items-center">
            <img src="assets/images/users/user2.png" alt="" class="w-10 h-10 rounded-full shrink-0 me-2 overflow-hidden">
            <h6 class="text-base mb-0 font-medium grow">Wade Warren</h6>
          </div>
        </td>
        <td class="bg-success-100 dark:bg-success-600/10">random@gmail.com</td>
        <td class="bg-success-100 dark:bg-success-600/10">Basic</td>
      </tr>
      <tr>
        <td class="bg-info-100 dark:bg-info-600/10">27 Mar 2024</td>
        <td class="bg-info-100 dark:bg-info-600/10">
          <div class="flex items-center">
            <img src="assets/images/users/user3.png" alt="" class="w-10 h-10 rounded-full shrink-0 me-2 overflow-hidden">
            <h6 class="text-base mb-0 font-medium grow">Albert Flores</h6>
          </div>
        </td>
        <td class="bg-info-100 dark:bg-info-600/10">random@gmail.com</td>
        <td class="bg-info-100 dark:bg-info-600/10">Standard </td>
      </tr>
      <tr>
        <td class="bg-warning-100 dark:bg-warning-600/10">27 Mar 2024</td>
        <td class="bg-warning-100 dark:bg-warning-600/10">
          <div class="flex items-center">
            <img src="assets/images/users/user4.png" alt="" class="w-10 h-10 rounded-full shrink-0 me-2 overflow-hidden">
            <h6 class="text-base mb-0 font-medium grow">Bessie Cooper</h6>
          </div>
        </td>
        <td class="bg-warning-100 dark:bg-warning-600/10">random@gmail.com</td>
        <td class="bg-warning-100 dark:bg-warning-600/10">Business </td>
      </tr>
      <tr>
        <td class="bg-danger-100 dark:bg-danger-600/10">27 Mar 2024</td>
        <td class="bg-danger-100 dark:bg-danger-600/10">
          <div class="flex items-center">
            <img src="assets/images/users/user5.png" alt="" class="w-10 h-10 rounded-full shrink-0 me-2 overflow-hidden">
            <h6 class="text-base mb-0 font-medium grow">Arlene McCoy</h6>
          </div>
        </td>
        <td class="bg-danger-100 dark:bg-danger-600/10">random@gmail.com</td>
        <td class="bg-danger-100 dark:bg-danger-600/10">Enterprise </td>
      </tr>
    </tbody>
  </table>
</div>