Responsive C R U D Table - Copy this Html, Tailwind Component to your project

The goal is to create a clean, modern, and responsive CRUD (Create, Read, Update, Delete) interface using Tailwind CSS. The interface will consist of a table displaying a list of records, each with columns representing relevant data such as names, details, or other entities. An action column will include Edit and Delete icons, styled using Tailwind's utilities, which allow users to modify or remove entries. At the top of the table, there will be an Add button. When clicked, this will open a modal that contains a form where users can input the data for a new record. The form will include various input fields, such as text inputs and select options, depending on the data structure. Each of the Edit and Delete actions will open their respective modals. The Edit modal will display the current record’s data in input fields, allowing the user to modify them and save the changes. The Delete modal will ask the user for confirmation before removing the record. To enhance the user experience, the modals will be designed to be easily closable, either by clicking the Close button or by clicking outside the modal area. When the user clicks outside the modal, it should automatically close, ensuring the interface remains intuitive and user-friendly. The layout will be fully responsive, adapting smoothly to different screen sizes, using Tailwind’s spacing, color, and hover utilities to ensure a clean and aesthetic design.