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

857

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

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

Author:
Ameth Galarcio

5 months ago

935
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

2 months ago

439
Large File upload input

Author:
Akshay

2 years ago

12.4k
Incentives
tailwind css Incentives

Author:
Anonymous

11 months ago

3.8k
Login Form
Admin Login Form

Author:
Khalid

9 months ago

1.2k
Datatable
Datatable example with datatable.js with search, sort, pagination

Author:
R.P Ketan

1 year ago

21.5k
Gradient Button
These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Author:
Md. Tofayel islam

9 months ago

2.1k
Table template

Author:
Lukas Müller

1 year ago

13.3k
Border bottom button

Author:
Santos78

1 year ago

11.1k
Sign In form

Author:
Amit Pachange

1 year ago

10.8k
Payment Button

Author:
Md. Tofayel islam

9 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components