Developer-Friendly Tailwind General Components

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Advanced Tables

<div class="max-w-full mx-auto p-4">
    <div class="mb-4">
        <input type="text" placeholder="Filter..." class="border-2 border-gray-200 rounded p-2 w-full" x-model="filterQuery"/>
    </div>
    <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-sm font-medium text-black uppercase tracking-wider" @click="sortColumn('name')">
                    Name
                    <span x-show="sortOrder == 'asc'">▲</span><span x-show="sortOrder == 'desc'">▼</span>
                </th>
                <th scope="col" class="px-6 py-3 text-left text-sm font-medium text-black uppercase tracking-wider" @click="sortColumn('age')">
                    Age
                    <span x-show="sortOrder == 'asc'">▲</span><span x-show="sortOrder == 'desc'">▼</span>
                </th>
                <th scope="col" class="px-6 py-3 text-left text-sm font-medium text-black uppercase tracking-wider" @click="sortColumn('email')">
                    Email
                    <span x-show="sortOrder == 'asc'">▲</span><span x-show="sortOrder == 'desc'">▼</span>
                </th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            <template x-for="entry in filteredData" :key="entry.id">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-black">{{ entry.name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-black">{{ entry.age }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-black">{{ entry.email }}</td>
                </tr>
            </template>
        </tbody>
    </table>
    <div class="mt-4">
        <button class="bg-blue-500 text-white px-3 py-1 rounded focus:outline-none" @click="prevPage" :disabled="currentPage === 0">Previous</button>
        <button class="bg-blue-500 text-white px-3 py-1 rounded focus:outline-none ml-2" @click="nextPage" :disabled="currentPage === pageCount - 1">Next</button>
    </div>
    <div class="mt-2 text-sm text-gray-600">
        Page {{ currentPage + 1 }} of {{ pageCount }}
    </div>
</div>

<js-component src="general/advanced_tables"></js-component>

Spaced Rows Tables

View

<div class="overflow-x-auto py-4">
  <table class="min-w-full bg-white divide-y divide-gray-200 border border-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">
          Status
        </th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
      <tr class="hover:bg-gray-50">
        <td class="px-6 py-4 whitespace-nowrap">
          John Doe
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          Software Engineer
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          Active
        </td>
      </tr>
      <tr class="hover:bg-gray-50">
        <td class="px-6 py-4 whitespace-nowrap">
          Jane Smith
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          Product Manager
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          Inactive
        </td>
      </tr>
      <tr class="hover:bg-gray-50">
        <td class="px-6 py-4 whitespace-nowrap">
          Emily Johnson
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          UX Designer
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          Active
        </td>
      </tr>
    </tbody>
  </table>
</div>

<js-component src="general/spaced_rows_tables"></js-component>