Respensive Table

Respensive table for all devices.

This tailwind example is contributed by Arshid Iqbal, on 16-Jun-2026. Component is made with Tailwind v3.4. It is responsive.

Table

Author Arshid Iqbal

Tailwind v3.4 377

Fork Fullscreen

<div class="w-full">
      <h1 class="w-full text-gray-400 font-bold text-4xl capitalize">salary</h1>
    </div>

<div class=" px-(--page-padding)  grow ">
        <table class="min-w-full whitespace-nowrap text-left text-gray-400 ">
          <thead class="text-gray-300 border-b border-gray-700/50">
            <tr class="[&_th]:p-4 [&_th:first-child]:pl-1 [&_th:last-child]:pr-1 [&_th:last-child]:text-right ">
              <th>Worker Name</th>
              <th>Position</th>
              <th>Department</th>
              <th>Salary</th>
            </tr>
          </thead>
          <tbody class="divide-gray-700/50 divide-y   [&_odd]:bg-gray-700  [&_even]:bg-gray-500  ">
            <tr class="[&_td]:p-4 [&_td:first-child]:pl-1 [&_td:last-child]:pr-1 [&_td:last-child]:text-right ">
              <td>John Smith</td>
              <td>Manager</td>
              <td>Sales</td>
              <td>$75,000</td>
            </tr>
            <tr class="[&_td]:p-4 [&_td:first-child]:pl-1 [&_td:last-child]:pr-1 [&_td:last-child]:text-right">
              <td>Sarah Johnson</td>
              <td>Developer</td>
              <td>IT</td>
              <td>$85,000</td>
            </tr>
            <tr class="[&_td]:p-4 [&_td:first-child]:pl-1 [&_td:last-child]:pr-1 [&_td:last-child]:text-right ">
              <td>Michael Brown</td>
              <td>Designer</td>
              <td>Marketing</td>
              <td>$65,000</td>
            </tr>
          </tbody>
        </table>
      </div>

</div>

Related Examples

Employee table
Modern Unique and responsive table layout

Rajesh Maheshwari

1 year ago

3.4k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

477
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Christian Ahlin

1 year ago

2.9k
Stripped table with tailwind css

Task Master

3 years ago

16.9k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Andreas Wagner

2 years ago

15.4k
User Profile
This is some information about the user.

gidy

1 year ago

1.3k
Table template

Oliver Hansen

3 years ago

17.3k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Anum Shahana

1 year ago

4k
crud
big crud

Hacker Development

1 year ago

1.5k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.6k
Simple table with border

Kairi Greene

3 years ago

13.3k
Employee table
Modern Unique and responsive table layout

Anonymous

1 year ago

1.4k