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

Demo image: Responsive Table

Author

  • Tailwind Toolbox

Made with

  • HTML / CSS / JS

About a code

Responsive Table

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.dataTables.css, responsive.dataTables.css, jquery.js, jquery.dataTables.js, dataTables.responsive.js

Tailwind version: 2.2.19

Demo image: Tailwind CSS Table

Author

  • zoltanszogyenyi

Made with

  • HTML / CSS

About a code

Tailwind CSS Table

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Tailwind CSS Advance Table Component

Author

  • Harrishash

Made with

  • HTML / CSS / JS

About a code

Tailwind CSS Advance Table Component

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Table Visits

Author

  • Creative Tim

Made with

  • HTML / CSS

About a code

Table Visits

Chart table with visits data.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fontawesome.css

Tailwind version: 2.2.4

Demo image: Table Social

Author

  • Creative Tim

Made with

  • HTML / CSS

About a code

Table Social

Table social traffic data.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fontawesome.css

Tailwind version: 2.2.4

Demo image: Responsive Table with TailwindCSS

Author

  • aji

Made with

  • HTML / CSS

About a code

Responsive Table with TailwindCSS

Building a table component with TailwindCSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Responsive Table

Author

  • Sufyan Farea

Made with

  • HTML / CSS

About a code

Responsive Table

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Customers Table

Author

  • Cruip

Made with

  • HTML / CSS

About a code

Customers Table

A simple customers table with horizontal scroll built with Tailwind.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Card Table

Author

  • Creative Tim

Made with

  • HTML / CSS

About a code

Card Table

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fontawesome.css

Tailwind version: 2.2.4

Demo image: Projects Table

Author

  • Gleb Varganov

Made with

  • HTML / CSS

About a code

Projects Table

Projects table component.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: English Premier League Table with Tailwind CSS

Author

  • Rob Stinson

Made with

  • HTML / CSS

About a code

English Premier League Table with Tailwind CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: Table Style #1

Author

  • TailGrids

Made with

  • HTML / CSS

About a code

Table Style #1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Table #1

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Table #1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Table #2

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Table #2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Table #3

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Table #3

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Table #4

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Table #4

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Customers Table with Horizontal Scroll - Tailwind CSS

Author

  • Cruip

Made with

  • HTML / CSS / JS

About a code

Customers Table with Horizontal Scroll - Tailwind CSS

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Lo-fi Tailwind CSS Table - Fixed Header + Footer

Author

  • Rob Stinson

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS Table - Fixed Header + Footer

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Lo-fi Tailwind CSS Feature Comparison Table

Author

  • Rob Stinson

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS Feature Comparison Table

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Tables

Author

  • dammy001

Made with

  • HTML / CSS

About a code

Tables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.5.2

Demo image: Tailwind CSS - Pricing Table #2

Author

  • Rhythm Ruparelia

Made with

  • HTML / CSS

About a code

Tailwind CSS - Pricing Table #2

Pricing table block using Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Tailwind Table Responsive with Filters

Author

  • Dinh Cuong VU

Made with

  • HTML / CSS

About a code

Tailwind Table Responsive with Filters

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Table Responsive with Filters

Author

  • IsidroMar95

Made with

  • HTML / CSS

About a code

Table Responsive with Filters

Table with filters and pagination.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.0.4

Demo image: User Table

Author

  • webtobesocial

Made with

  • HTML / CSS

About a code

User Table

A user table for TailwindCSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.0.3

Demo image: Fixed Height Scrollable Table

Author

  • codetimeio

Made with

  • HTML / CSS

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0