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

360

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

Author:
Ameth Galarcio

4 months ago

729
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

1 month ago

294
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

3 months ago

335
Book appointment form

Author:
Lukas Müller

1 year ago

20.8k
Simple table with border

Author:
Kairi Greene

1 year ago

10.9k
Tailwind CSS Radio Button Cards

Author:
Prashant

2 years ago

10.4k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

4 months ago

733
Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

1 year ago

6.7k
rgb border button

Author:
Akram Khan

4 months ago

918
Primary and secondary button pair
Call to action buttons

Author:
Manuela Bianka

2 years ago

13.2k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

1 year ago

13.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent