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

For implementing the table layout shown in the image for a web page, you'll want to provide clear instructions on the HTML structure, CSS styling, and any responsive behaviors needed. Here's a detailed guide you can provide to your frontend team: 1. HTML Structure Divide into Sections: Organize the page into two main sections: DETAIL FISH and DETAIL PRESCRIPTION. Use Tables for Data: Use the <table> tag to create tables under each section. Ensure each table has appropriate <thead> and <tbody> sections for semantic clarity and styling. 2. CSS Styling Basic Styling: Style the tables to match the clean and straightforward design shown in the image. Use CSS to set the border, font size, and spacing. Headers and Text Alignment: Use bold text for table headers and align text left in the cells, which is typical for readability in tables. Zebra Striping for Rows: Optionally, use zebra striping (alternating shaded rows) to make the tables easier to read. 3. Interactivity Hover Effects: Add a hover effect on rows to improve user interaction, indicating that the row is selectable or highlighting the current row under the mouse pointer. 4. Accessibility Proper Headers: Use <th> tags in the <thead> element to define headers for accessibility. ARIA Labels: Consider using ARIA labels if the table has complex structures or interactive elements. 5. Responsiveness Responsive Tables: Ensure tables are responsive. Use CSS techniques such as making the table horizontally scrollable on smaller screens. Media Queries: Implement media queries to handle different device widths and orientations. 6. Navigation Links Previous/Next Navigation: Clearly mark navigation links for "Previous Article" and "Next Article". Style them as buttons or links that are easy to find and use