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.6k

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.3k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

9 months ago

1.3k
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

6 months ago

988
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

2 months ago

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

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

1 month ago

328
Plug and Play Button - Animated gradient background
Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

5 months ago

1.2k
WHOIS Domain Lookup

Author:
Maxim

3 weeks ago

86
Sharp corner button design
button with hover effect

Author:
Amit Pachange

2 years ago

11.6k
Custom Carosel

Author:
Md. Tofayel islam

6 months ago

1.8k
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

7 months ago

1.6k
login page

Author:
Abid Ullah

7 months ago

1.3k
Contact Form
with hidden email

Author:
Geoffrey Callaghan

1 year ago

6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components