Developer-Friendly Tailwind Application Components

Table Filters

<div class="flex h-full w-full flex-col">
  <div class="mb-4 flex flex-col items-center gap-4 md:flex-row md:justify-between">
    <input type="text" placeholder="Search..." class="w-full rounded border border-gray-300 px-4 py-2 outline-none focus:ring focus:ring-blue-200 md:w-1/3" />
    <select class="w-full rounded border border-gray-300 px-4 py-2 focus:outline-none focus:ring focus:ring-blue-200 md:w-1/4">
      <option value="">Filter by Category</option>
      <option value="category1">Category 1</option>
      <option value="category2">Category 2</option>
      <option value="category3">Category 3</option>
    </select>
    <button class="w-full rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:ring focus:ring-blue-200 md:w-auto">Apply Filters</button>
  </div>
  <table class="min-w-full border border-gray-200 bg-white">
    <thead>
      <tr>
        <th class="px-4 py-2 text-left">Name</th>
        <th class="px-4 py-2 text-left">Category</th>
        <th class="px-4 py-2 text-left">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border-t px-4 py-2">Item 1</td>
        <td class="border-t px-4 py-2">Category 1</td>
        <td class="border-t px-4 py-2">01/01/2023</td>
      </tr>
      <tr>
        <td class="border-t px-4 py-2">Item 2</td>
        <td class="border-t px-4 py-2">Category 2</td>
        <td class="border-t px-4 py-2">02/01/2023</td>
      </tr>
    </tbody>
  </table>
  <div class="mt-4 md:mt-0" x-data="{ open: false }">
    <button @click="open = !open" class="text-blue-600 underline focus:outline-none">Toggle Filter Details</button>
    <div x-show="open" class="mt-2 border-t border-gray-200 pt-2">
      <p class="text-sm">Additional filter options will be displayed here when toggled.</p>
    </div>
  </div>
</div>

<js-component src="application/table_filters"></js-component>

Comparison Table

View

<div id="detailed-pricing" class="w-full overflow-x-auto">
  <div class="min-w-max overflow-hidden">
    <div class="grid grid-cols-4 gap-x-16 border-b border-t border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900">
      <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 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700">
      <div class="text-gray-500">Basic components (<a href="#" class="text-blue-600 hover:underline">view all</a>)</div>
      <div>
        <svg class="h-3 w-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="h-3 w-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="h-3 w-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 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700">
      <div class="text-gray-500">Application UI (<a href="#" class="text-blue-600 hover:underline">view demo</a>)</div>
      <div>
        <svg class="h-3 w-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="h-3 w-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="h-3 w-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 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700">
      <div class="text-gray-500">Marketing UI pre-order</div>
      <div>
        <svg class="h-3 w-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="h-3 w-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="h-3 w-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 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700">
      <div class="text-gray-500">E-commerce UI pre-order</div>
      <div>
        <svg class="h-3 w-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="h-3 w-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="h-3 w-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 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700">
      <div class="text-gray-500"></div>
      <div>
        <a href="#" class="block w-full rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200">Buy now</a>
      </div>
      <div>
        <a href="#" class="block w-full rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200">Buy now</a>
      </div>
      <div>
        <a href="#" class="block w-full rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200">Buy now</a>
      </div>
    </div>
  </div>
</div>

<js-component src="application/comparison_table"></js-component>

Table With Products

View

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
  <table class="w-full text-left text-sm text-gray-500 rtl:text-right">
    <thead class="bg-gray-50 text-xs uppercase text-gray-700">
      <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="border-b bg-white hover:bg-gray-50">
        <td class="p-4">
          <img src="https://images.pexels.com/photos/393047/pexels-photo-393047.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="max-h-full w-16 max-w-full rounded-xl md:w-32" alt="Apple Watch" />
        </td>
        <td class="px-6 py-4 font-semibold text-gray-900">Apple Watch</td>
        <td class="px-6 py-4">
          <div class="flex items-center">
            <button class="me-3 inline-flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white p-1 text-sm font-medium text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200" type="button">
              <span class="sr-only">Quantity button</span>
              <svg class="h-3 w-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="block w-14 rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-1 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="1" required />
            </div>
            <button class="ms-3 inline-flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white p-1 text-sm font-medium text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200" type="button">
              <span class="sr-only">Quantity button</span>
              <svg class="h-3 w-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">$599</td>
        <td class="px-6 py-4">
          <a href="#" class="font-medium text-red-600 hover:underline">Remove</a>
        </td>
      </tr>
      <tr class="border-b bg-white hover:bg-gray-50">
        <td class="p-4">
          <img src="https://images.pexels.com/photos/5082554/pexels-photo-5082554.jpeg" class="max-h-full w-16 max-w-full rounded-xl md:w-32" alt="Apple iMac" />
        </td>
        <td class="px-6 py-4 font-semibold text-gray-900">iMac 27"</td>
        <td class="px-6 py-4">
          <div class="flex items-center">
            <button class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white p-1 text-sm font-medium text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200" type="button">
              <span class="sr-only">Quantity button</span>
              <svg class="h-3 w-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="block w-14 rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-1 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="1" required />
            </div>
            <button class="ms-3 inline-flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white p-1 text-sm font-medium text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200" type="button">
              <span class="sr-only">Quantity button</span>
              <svg class="h-3 w-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">$2499</td>
        <td class="px-6 py-4">
          <a href="#" class="font-medium text-red-600 hover:underline">Remove</a>
        </td>
      </tr>
      <tr class="border-b bg-white hover:bg-gray-50">
        <td class="p-4">
          <img src="https://images.pexels.com/photos/6608247/pexels-photo-6608247.jpeg?auto=compress&cs=tinysrgb&w=600" class="max-h-full w-16 max-w-full rounded-xl md:w-32" alt="iPhone 12" />
        </td>
        <td class="px-6 py-4 font-semibold text-gray-900">IPhone 12</td>
        <td class="px-6 py-4">
          <div class="flex items-center">
            <button class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white p-1 text-sm font-medium text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200" type="button">
              <span class="sr-only">Quantity button</span>
              <svg class="h-3 w-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="block w-14 rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-1 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="1" required />
            </div>
            <button class="ms-3 inline-flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white p-1 text-sm font-medium text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200" type="button">
              <span class="sr-only">Quantity button</span>
              <svg class="h-3 w-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">$999</td>
        <td class="px-6 py-4">
          <a href="#" class="font-medium text-red-600 hover:underline">Remove</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<js-component src="application/table_with_products"></js-component>

Table With User

View

<div class="relative overflow-x-auto shadow-md sm:rounded-lg" x-data="{open: false}">
  <div class="flex-column flex flex-wrap items-center justify-between space-y-4 bg-white pb-4 md:flex-row md:space-y-0">
    <div>
      <button @click="{open = !open}" id="dropdownActionButton" data-dropdown-toggle="dropdownAction" class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100" type="button">
        <span class="sr-only">Action button</span>
        Action
        <svg class="ms-2.5 h-2.5 w-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>
      
      <div id="dropdownAction" class="z-10 hidden w-44 divide-y divide-gray-100 rounded-lg bg-white shadow">
        <ul x-show="open" class="py-1 text-sm text-gray-700" aria-labelledby="dropdownActionButton">
          <li>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">Reward</a>
          </li>
          <li>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">Promote</a>
          </li>
          <li>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">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">Delete User</a>
        </div>
      </div>
    </div>
    <label for="table-search" class="sr-only">Search</label>
    <div class="relative">
      <div class="rtl:inset-r-0 pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
        <svg class="h-4 w-4 text-gray-500" 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 w-80 rounded-lg border border-gray-300 bg-gray-50 p-2 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="Search for users" />
    </div>
  </div>
  <table class="w-full text-left text-sm text-gray-500 rtl:text-right">
    <thead class="bg-gray-50 text-xs uppercase text-gray-700">
      <tr>
        <th scope="col" class="p-4">
          <div class="flex items-center">
            <input id="checkbox-all-search" type="checkbox" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
            <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="border-b bg-white hover:bg-gray-50">
        <td class="w-4 p-4">
          <div class="flex items-center">
            <input id="checkbox-table-search-1" type="checkbox" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
            <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
          </div>
        </td>
        <th scope="row" class="flex items-center whitespace-nowrap px-6 py-4 text-gray-900">
          <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200" 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="me-2 h-2.5 w-2.5 rounded-full bg-green-500"></div>
            Online
          </div>
        </td>
        <td class="px-6 py-4">
          <a href="#" class="font-medium text-blue-600 hover:underline">Edit user</a>
        </td>
      </tr>
      <tr class="border-b bg-white hover:bg-gray-50">
        <td class="w-4 p-4">
          <div class="flex items-center">
            <input id="checkbox-table-search-2" type="checkbox" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
            <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
          </div>
        </td>
        <th scope="row" class="flex items-center whitespace-nowrap px-6 py-4 font-medium text-gray-900">
          <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200" 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="me-2 h-2.5 w-2.5 rounded-full bg-green-500"></div>
            Online
          </div>
        </td>
        <td class="px-6 py-4">
          <a href="#" class="font-medium text-blue-600 hover:underline">Edit user</a>
        </td>
      </tr>
      <tr class="border-b bg-white hover:bg-gray-50">
        <td class="w-4 p-4">
          <div class="flex items-center">
            <input id="checkbox-table-search-2" type="checkbox" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
            <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
          </div>
        </td>
        <th scope="row" class="flex items-center whitespace-nowrap px-6 py-4 font-medium text-gray-900">
          <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200" 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="me-2 h-2.5 w-2.5 rounded-full bg-green-500"></div>
            Online
          </div>
        </td>
        <td class="px-6 py-4">
          <a href="#" class="font-medium text-blue-600 hover:underline">Edit user</a>
        </td>
      </tr>
      <tr class="border-b bg-white hover:bg-gray-50">
        <td class="w-4 p-4">
          <div class="flex items-center">
            <input id="checkbox-table-search-2" type="checkbox" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
            <label for="checkbox-table-search-2" class="sr-only">checkbox</label>
          </div>
        </td>
        <th scope="row" class="flex items-center whitespace-nowrap px-6 py-4 font-medium text-gray-900">
          <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200" 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="me-2 h-2.5 w-2.5 rounded-full bg-green-500"></div>
            Online
          </div>
        </td>
        <td class="px-6 py-4">
          <a href="#" class="font-medium text-blue-600 hover:underline">Edit user</a>
        </td>
      </tr>
      <tr class="bg-white hover:bg-gray-50">
        <td class="w-4 p-4">
          <div class="flex items-center">
            <input id="checkbox-table-search-3" type="checkbox" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500" />
            <label for="checkbox-table-search-3" class="sr-only">checkbox</label>
          </div>
        </td>
        <th scope="row" class="flex items-center whitespace-nowrap px-6 py-4 font-medium text-gray-900">
          <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200" 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="me-2 h-2.5 w-2.5 rounded-full bg-red-500"></div>
            Offline
          </div>
        </td>
        <td class="px-6 py-4">
          <a href="#" class="font-medium text-blue-600 hover:underline">Edit user</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<js-component src="application/table_with_user"></js-component>

Table Foot

View

<div class="relative overflow-x-auto">
  <table class="w-full text-left text-sm text-gray-500 rtl:text-right">
    <thead class="bg-gray-100 text-xs uppercase text-gray-700">
      <tr>
        <th scope="col" class="rounded-s-lg px-6 py-3">Product name</th>
        <th scope="col" class="px-6 py-3">Qty</th>
        <th scope="col" class="rounded-e-lg px-6 py-3">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-white">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900">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">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900">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">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900">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">
        <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>

<js-component src="application/table_foot"></js-component>

Default Table

View

<div class="relative overflow-x-auto">
  <table class="w-full text-left text-sm text-gray-500 rtl:text-right">
    <thead class="bg-gray-50 text-xs uppercase text-gray-700">
      <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="border-b bg-white">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900 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="border-b bg-white">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900 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">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900 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>

<js-component src="application/default_table"></js-component>

Table Row Hightlight

View

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
  <table class="w-full text-left text-sm text-gray-500 rtl:text-right">
    <thead class="bg-gray-50 text-xs uppercase text-gray-700">
      <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="border-b odd:bg-white even:bg-gray-50">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900">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 hover:underline">Edit</a>
        </td>
      </tr>
      <tr class="border-b odd:bg-white even:bg-gray-50">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900">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 hover:underline">Edit</a>
        </td>
      </tr>
      <tr class="border-b odd:bg-white even:bg-gray-50">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900">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 hover:underline">Edit</a>
        </td>
      </tr>
      <tr class="border-b odd:bg-white even:bg-gray-50">
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900">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 hover:underline">Edit</a>
        </td>
      </tr>
      <tr>
        <th scope="row" class="whitespace-nowrap px-6 py-4 font-medium text-gray-900">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 hover:underline">Edit</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<js-component src="application/table_row_hightlight"></js-component>

Table Header

View

<js-component src="application/table_header"></js-component>

Table Pagination

View

<div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Name
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Title
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Email
                </th>
                <th scope="col" class="relative px-6 py-3">
                    <span class="sr-only">Edit</span>
                </th>
            </tr>
        </thead>
        <tbody id="table-body" class="bg-white divide-y divide-gray-200">
            
        </tbody>
    </table>
    
    <div class="px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
        <div class="flex-1 flex justify-between sm:hidden">
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                Previous
            </a>
            <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                Next
            </a>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div class="pr-2">
                <p class="text-sm text-gray-700">
                    Showing
                    <span class="font-medium">1</span>
                    to
                    <span class="font-medium">10</span>
                    of
                    <span class="font-medium">97</span>
                    results
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <span class="sr-only">Previous</span>
                        
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M12.293 4.293a1 1 0 011.414 0l.083.094a1 1 0 01-.083 1.32l-4 4a1 1 0 01-1.32-.083l-.094-.083 3.293-3.292-3.293 3.292a1 1 0 01-1.497-1.32l.083-.094 4-4 4 4-4-4zm-.707 5.414l3.293 3.293L11.586 9l3.293 3.293a1 1 0 01-1.32 1.497l-.094-.083-4-4a1 1 0 01-.083-1.32l.094-.083 4-4-4 4z" clip-rule="evenodd"/>
                        </svg>
                    </a>
                    
                    <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-600 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        1
                    </a>
                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        2
                    </a>
                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        3
                    </a>
                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                        ...
                    </span>
                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        8
                    </a>
                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        9
                    </a>
                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        10
                    </a>
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <span class="sr-only">Next</span>
                        
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 01-.083-1.32l.083-.094L10.586 10 7.293 6.707a1 1 0 011.32-1.497l.094.083 4 4a1 1 0 01.083 1.32l-.083.094-4 4a1 1 0 01-1.414 0l-.083-.094-3.293-3.292 3.293 3.292z" clip-rule="evenodd"/>
                        </svg>
                    </a>
                </nav>
            </div>
        </div>
    </div>
</div>

<js-component src="application/table_pagination"></js-component>

Table Row

View

<js-component src="application/table_row"></js-component>

Data Table

View

<div class="min-w-full overflow-x-auto"><table class="min-w-full table-auto border-collapse"><thead><tr class="bg-gray-100">
    <th class="px-4 py-2 font-medium text-left cursor-pointer" @click="sortColumn('name')">Name</th>
    <th class="px-4 py-2 font-medium text-left cursor-pointer" @click="sortColumn('age')">Age</th>
    <th class="px-4 py-2 font-medium text-left cursor-pointer" @click="sortColumn('occupation')">Occupation</th>
  </tr></thead><tbody class="bg-white">
  <tr class="hover:bg-gray-50">
    <td class="px-4 py-2">John Doe</td>
    <td class="px-4 py-2">29</td>
    <td class="px-4 py-2">Software Engineer</td>
  </tr>
  <tr class="hover:bg-gray-50">
    <td class="px-4 py-2">Jane Smith</td>
    <td class="px-4 py-2">34</td>
    <td class="px-4 py-2">Product Manager</td>
  </tr>
</tbody></table></div>
<script>
  function dataTable() {
    return {
      sortColumn(column) {
        console.log(`Sorting by ${column}`);
        // Implement sorting logic here
      }
    }
  }
</script>

<js-component src="application/data_table"></js-component>