Home
Anum Shahana
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS

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.

This tailwind example is contributed by Anum Shahana, on 13-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is HR

Button Form Table Divider

Author Anum Shahana

1.9k

Fork Fullscreen

<div class="bg-white p-8 overflow-auto mt-16 h-screen">
  <h2 class="text-2xl mb-4">Classes List</h2>

<div class="relative overflow-auto">
    <div class="overflow-x-auto rounded-lg">
      <table class="min-w-full bg-white border mb-20">
        <thead>
          <tr class="bg-[#2B4DC994] text-center text-xs md:text-sm font-thin text-white">
            <th class="p-0">
              <span class="block py-2 px-3 border-r border-gray-300">ID</span>
            </th>
            <th class="p-0">
              <span class="block py-2 px-3 border-r border-gray-300">Class Name</span>
            </th>
            <th class="p-0">
              <span class="block py-2 px-3 border-r border-gray-300">Level</span>
            </th>
            <th class="p-4 text-xs md:text-sm">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b text-xs md:text-sm text-center text-gray-800">
            <td class="p-2 md:p-4">01</td>
            <td class="p-2 md:p-4">Class 1</td>
            <td class="p-2 md:p-4">Beginner</td>
            <td class="relative p-2 md:p-4 flex justify-center space-x-2">
              <button class="bg-blue-500 text-white px-3 py-1 rounded-md text-xs md:text-sm">Edit</button>
              <button class="bg-red-500 text-white px-3 py-1 rounded-md text-xs md:text-sm">Delete</button>
            </td>
          </tr>
          <tr class="border-b text-xs md:text-sm text-center text-gray-800">
            <td class="p-2 md:p-4">02</td>
            <td class="p-2 md:p-4">Class 2</td>
            <td class="p-2 md:p-4">Intermediate</td>
            <td class="relative p-2 md:p-4 flex justify-center space-x-2">
              <button class="bg-blue-500 text-white px-3 py-1 rounded-md text-xs md:text-sm">Edit</button>
              <button class="bg-red-500 text-white px-3 py-1 rounded-md text-xs md:text-sm">Delete</button>
            </td>
          </tr>
          <tr class="border-b text-xs md:text-sm text-center text-gray-800">
            <td class="p-2 md:p-4">03</td>
            <td class="p-2 md:p-4">Class 3</td>
            <td class="p-2 md:p-4">Advanced</td>
            <td class="relative p-2 md:p-4 flex justify-center space-x-2">
              <button class="bg-blue-500 text-white px-3 py-1 rounded-md text-xs md:text-sm">Edit</button>
              <button class="bg-red-500 text-white px-3 py-1 rounded-md text-xs md:text-sm">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Related Examples

Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.6k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

11 months ago

1.8k
Responsive Class List Table using Tailwind CSS
A responsive and customizable class list table built with Tailwind CSS, featuring actions for editing and deleting classes.

Author:
Anum Shahana

8 months ago

1.2k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

4 months ago

587
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

3 months ago

815
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

1 month ago

55
Gradient shadow button

Author:
Manon Daniel

2 years ago

16.2k
Old style Button Designs

Author:
Amit Pachange

2 years ago

9.4k
Floating pus button

Author:
Jaffar Hussain

10 months ago

1.3k
Continue with Discord button
Login with the Discord button for social login

Author:
Anonymous

1 year ago

2.6k
Github stars button
Display the GitHub stars received by your project

Author:
Benjamin Ng

2 years ago

8.2k
Feedback form with fabform.io
Collect opinions about your company's service

Author:
Ho O

5 months ago

548

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components