H O U R S - Copy this React, Tailwind Component to your project

“Design a Calendar View screen similar to Google Calendar or Outlook. The layout should display a large grid calendar. Days are shown as columns across the top (e.g., Mon, Tue, Wed …). Time slots are shown as rows on the left side (e.g., 00:00 → 23:00, every 30 or 60 minutes). Each cell in the grid represents a combination of a specific day + time. Events are displayed as colored blocks spanning the corresponding time range within the correct day column. Each event shows title and can expand on hover. Clicking on an empty cell captures the exact date & time of that slot and opens the Create Event form pre filled with that start time. Responsive behavior: Desktop → full week view (7 columns). Mobile → daily or 3 day view with horizontal scroll. UI details: Highlight the current day column. Smooth scroll to current time. Subtle hover effect on each cell. Soft shadows, rounded event cards. Top header includes navigation (Today, Prev, Next), view switch (Day/Week/Month), and a button “+ New Event”. Sidebar (optional) can show a mini month calendar for quick navigation. Accessibility: proper ARIA labels for days & times, keyboard navigation to move focus between cells. Overall style: modern, clean, light theme, minimalistic like a professional calendar app.”