Employee Shift Scheduler - Copy this Html, Tailwind Component to your project

I like the second code(B code). I need a filtering tool by date and by restaurant. There should be functional buttons: Update Schedule (for updating and reviewing), Save Schedule (save to the system), and Export Data (export to Excel). This is the design style:Header Layout: Logo: Positioned on the left of the header, maintaining consistent brand identity and prominence across all pages. Navigation Bar: Centrally aligned or spaced horizontally with a clean, sans-serif font for navigation links. The active page should be visually indicated with a subtle underline or highlight (e.g., a thin colored line below the active link). User Interaction Elements: Icons for notifications and user profile, placed on the right side of the header. Notification icons can have badges for counts, and the user avatar should follow a consistent circular design with any status indicators as needed. Main Content Layout: Page Title/Section Title: Prominently displayed at the top of the content area, ensuring immediate clarity on the page’s function. Primary Content Area: Use of tables, cards, or structured layouts depending on the data presentation needs. Tables: Clean grid-based design with distinct headers and rows. Headers should have a slight visual distinction (e.g., bold text, background color) to differentiate from data rows. Forms and Input Areas: Clear and consistent styling for inputs, dropdowns, buttons, etc., ensuring they follow a standard shape, padding, and color scheme. Side Panels (if applicable): Vertically aligned panels to display complementary information (e.g., attendance records, additional options). Backgrounds of side panels can be a contrasting but subtle shade to visually separate them from the main content. Footer (if applicable): Simple, unobtrusive footer with links to secondary pages, contact information, or other relevant details. Color Scheme: Primary Colors: Maintain a consistent use of brand colors for primary elements (e.g., headers, navigation highlights). Neutral Backgrounds: White or very light gray backgrounds to maintain a clean look. Use subtle shades for contrast when separating different sections. Accent Colors: Use accent colors (e.g., blue for notification badges, yellow highlights for active links) sparingly to guide user focus. Typography: Consistent use of a sans-serif font for readability. Differentiated text sizes for headings, subheadings, and body content to maintain hierarchy and clarity. Text should have adequate spacing to ensure legibility. Spacing and Alignment: Uniform padding and margins for all elements to maintain a structured and balanced appearance. Consistent use of whitespace to reduce visual clutter and focus user attention. Buttons and Interactive Elements: Buttons should have a consistent style (e.g., rounded corners, padding, color) and change state (hover, active, disabled) to indicate interactivity. Icons should be clean and consistent throughout the website. Responsive Design: Ensure all pages and components are optimized for different screen sizes, including collapsible menus, resizable tables, and stacked layouts on smaller devices.