Collection of free Tailwind CSS table components from Codepen and other resources

Responsive Table

Hides columns as screen gets smaller and displays a toggle icon to view the rest of the data.

Tailwind CSS Table

Use this table component to show tabular data inside rows and columns.

Tailwind CSS Advance Table Component

The Tailwind table components serve as a holder for different components.

Table Visits

Chart table with visits data.

Table Social

Table social traffic data.

Responsive Table with TailwindCSS

Building a table component with TailwindCSS.

Responsive Table

Customers Table

A simple customers table with horizontal scroll built with Tailwind.

Card Table

Projects Table

Projects table component.

English Premier League Table with Tailwind CSS

Table Style #1

Table #1

Table #2

Table #3

Table #4

Customers Table with Horizontal Scroll - Tailwind CSS

A responsive table with horizontal scroll showing customers made with Tailwind CSS.

Lo-fi Tailwind CSS Table - Fixed Header + Footer

Lo-fi Tailwind CSS Feature Comparison Table

Tables

Tailwind CSS - Pricing Table #2

Pricing table block using Tailwind CSS.

Tailwind Table Responsive with Filters

Table Responsive with Filters

Table with filters and pagination.

User Table

A user table for TailwindCSS.

Fixed Height Scrollable Table

Displaying a table using Flexbox allows you to apply fixed heights to certain areas. In this example, the table body has a height of 50vh, or half the viewport. Because Flexbox styles overwrite many table defaults, we need to reset them using flex properties instead. This example uses TailwindCSS, but the same techniques can be applied with vanilla CSS or any other Flexbox supporting framework. Note how flex styles are being applied to the table head, table body, and table row tags. Also, note the fixed widths being applied to each.