Delete Confirmation Modal - Copy this Html, Tailwind Component to your project

Generate a premium light-themed table design using Tailwind CSS and Material Design principles. The table should have a clean, minimalistic, and modern look, featuring smooth hover effects, elegant borders, alternating row colors, and stylish fonts. Incorporate Material Design icons for interactivity, such as edit, delete, and view icons in each row, and ensure that the layout is responsive and accessible. Include the following styles: Light Theme: Use soft colors like light gray, white, and subtle shades of blue for headers, rows, and borders. Hover Effects: Add smooth transitions with background color changes on hover for both rows and icons. Header Styling: Make the table header bold, with a background color that contrasts well with the body rows (e.g., a soft blue or teal). Add a Material Design icon to represent sorting or filtering. Icons: Utilize Material Design icons for actions like "edit", "delete", and "view" inside each row, with a modern look and hover effect. Responsive Design: Ensure the table is mobile-friendly by making the table scrollable on smaller screens and maintaining readability. Typography: Use a clean sans-serif font with ample padding and margin for a spacious, well-organized feel. Pagination: If the table has many rows, add a pagination feature styled with Material Design buttons at the bottom. Use the following resources in the code: Tailwind CSS for utility-first styling. Material Design icons from Google Fonts for the iconography. Ensure the code is clean, maintainable, and follows modern web development practices. Generate the HTML, CSS, and JavaScript necessary to achieve the design, including Tailwind CSS classes for styling and Material Design icons for interactivity. The table should be suitable for use in professional web applications, dashboards, or administrative panels.