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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
Made with
- HTML / CSS
About a code
Responsive Table
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.4

Links
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

Links
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

Links
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

Links
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

Links
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+

Links
Made with
- HTML / CSS
About a code
Table #1
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Table #2
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Table #3
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Table #4
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
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+

Links
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

Links
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

Links
Made with
- HTML / CSS
About a code
Tables
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.5.2

Links
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

Links
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

Links
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

Links
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

Links
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