Memorial Page - Copy this React, Tailwind Component to your project

1. Overall Layout: Two column layout: Fixed sidebar (20% width) on the left, fluid content (80% width) on the right. Mobile responsive: Switches to a single column layout on smaller screens (below 768px), with the sidebar collapsing into a hamburger menu. 2. Sidebar: Background: White (#FFFFFF), icon color dark gray (#4A5568), hover state light blue (#3182CE). Icon Size: 20px with 20px vertical and 15px horizontal padding. Hover changes to white with a blue background. 3. Search Bar: Background: White (#FFFFFF) with light gray border (#E2E8F0), rounded corners. Placeholder: "Search Your Memorials" in light gray (#A0AEC0), 14px font. Focus Effect: Border changes to blue (#3182CE), with a subtle shadow. 4. Section Titles: Font: Bold, 16px Roboto, dark gray (#2D3748), with 20px vertical padding. Collapse/Expand Icon: Down arrow (#A0AEC0), hover changes to blue (#3182CE). 5. Card Layout: Two Rows: 1st Row: Background image (70% height), circular profile picture (80px), centered with a white border and shadow. 2nd Row: Memorial name (16px, bold, dark gray), date/time (14px, gray), and description (14px, light gray). Hover Effect: Elevation, shadow effect, zoom in on the profile picture, and darkening of the background image. 6. Responsiveness: On smaller screens, profile picture scales to 60px, fonts resize (name 14px, date 12px, description 12px), and the card layout adapts to 1 column. 7. Hover Effects & Transitions: Smooth hover transitions (0.2s) for card elevation, background, and image effects. Tooltip: Shows full memorial name if text is truncated.