Responsive Table - Copy this React, Tailwind Component to your project

Please generate a new table design based on the following specifications: General Structure: Create a responsive table that adapts to various screen sizes, adding a horizontal scroll bar when necessary. Add a subtle shadow effect to the table for a modern look and depth. Ensure consistent spacing and padding to make the table clear, clean, and easy to interact with. Table Header: The header should be styled with a gradient background (blue to purple or your choice of complementary colors) with white text and bold fonts to enhance readability. Include a hover effect for header cells, where the background color darkens slightly to indicate interactivity. Make sure the table header is fixed so that it remains visible when scrolling down. Table Rows: Implement alternating row colors (light/dark) to make the rows visually distinguishable and more accessible. Add a smooth transition effect for row hover, where the background color changes to a subtle hover color or shadow when interacting. Ensure that the table rows are high contrast, making them legible for all users. Specific Columns: "Estación" column: This column should have a slightly darker background with white text to help it stand out. Weekday columns: Apply a subtle hover effect for better interactivity when hovered or selected. Columns like inventarioMagna, inventarioPremium, and inventarioDiesel should be styled with custom background colors: inventarioMagna: rgb(0,165,81) (green) inventarioPremium: rgb(213,43,30) (red) inventarioDiesel: rgb(55,55,53) (dark gray) Weekday values: For the columns with numeric values like dInventariados1, dInventariados2, dInventariados3, apply a gradient effect if the value is between a specific range. For example, create a green to transparent gradient for values greater than 1 and a soft gradient if the value is between 0 and 1. Accessibility: Add appropriate aria labels to ensure the table is screen reader friendly. Ensure that all interactive elements (like buttons) have clear and larger clickable areas. Add tooltips to buttons in the "Acciones" column to make the action clear (e.g., "Delete this station"). Action Column: The "Acciones" column should contain a button with a destructive color (e.g., red or orange) for deleting a station, with a trash icon or similar. Ensure that the delete button is clearly distinguishable from other buttons, with a hover effect to make it clear that it is an actionable button. Ensure that the button size is consistent across the table rows and aligns properly. Overall Design: Ensure the table cells are well aligned and not overcrowded. There should be equal padding for all cells. For numeric data, center align the text to make the data easier to read. Apply a smooth animation effect when a row is clicked or selected to enhance the interaction. Expected Outcome: A fully responsive and well designed table, with alternating row colors, a fixed header, and visually distinct columns for inventarioMagna, inventarioPremium, and inventarioDiesel. Improved accessibility with appropriate tooltips, aria labels, and larger interactive areas. Clear and consistent column layout with gradient and hover effects.