Chat Verse - Copy this React, Tailwind Component to your project

###-ChatVerse-UI-Prompt:-Chat-App-Home-Page-and-Chat-Input-Page-**Goal**:-Design-an-intuitive,-dynamic,-and-responsive-UI-for-ChatVerse’s-home-page,-chat-interface,-and-profile-details-modal.-Ensure-seamless-navigation,-responsiveness-for-mobile,-tablet,-and-desktop,-and-fluid-user-interactions.-Use-**React.js**,-**Tailwind-CSS**,-and-modern-UI-principles.-----####-**Page-1:-Home-Page**-**Features**:-Recent-chats,-new-message-notifications,-and-dynamic-navigation-to-chat-interface.---**Header**:---App-logo-and-title-on-the-left.---Search-bar-for-finding-chats-or-users.---Menu-options:-Home,-Online-Users,-Profile,-Logout.---**Recent-Chats-Section**:---List-of-recent-chats-with:---User-profile-photo,-name,-and-last-message-preview.---Timestamp-of-last-activity.---Notification-badge-for-unread-messages.---Online/offline-status-indicator-(green-dot-for-online).---Clicking-on-any-chat-opens-the-**Chat-Input-UI**.---**Floating-Action-Button-(FAB)**:---Circular-"New-Message"-button-to-start-a-new-chat.-**Responsive-Design**:---**Mobile**:-Single-column-layout-with-sticky-bottom-navigation-bar.---**Tablet/Desktop**:-Two-column-layout-(menu/sidebar-on-the-left-and-recent-chats-on-the-right).-----####-**Page-2:-Chat-Input-UI**-**Features**:-Chat-interaction-with-message-options,-user-profile-modal,-and-header-navigation.---**Header**:---Back-button-to-return-to-Home.---User-profile-photo,-name,-and-online/offline-status.---"More"-icon-for-additional-options-(e.g.,-block-user,-mute-notifications).---**Message-Area**:---Chat-bubbles-for-sent-and-received-messages.---Timestamps-under-each-message.---Delivery/read-status-icons-(single-tick-for-sent,-double-ticks-for-delivered,-and-colored-ticks-for-seen).---When-tapping-on-a-message,-show-a-contextual-menu-with-options:---Copy---Reply---React-(emoji-picker)---Unsend-(delete-for-everyone)---Delete-for-me---**Chat-Input**:---Text-input-box-with-emoji,-file-attachment,-and-send-buttons.---Clicking-on-the-user’s-profile-photo-opens-a-**profile-modal**.-**Responsive-Design**:---**Mobile**:-Full-screen-chat-view-with-sticky-input-at-the-bottom.---**Tablet/Desktop**:-Split-view-for-chat-(left)-and-input-(right).-----####-**Profile-Modal**-**Features**:-User-profile-information-with-editing-capabilities.---**Fields-Displayed**:---Profile-photo---Full-name---User-ID---Date-of-birth---Bio---Profession---Mobile-number---Email-address---**Actions**:---Edit-button-for-updating-profile-details.---Save/Cancel-buttons-for-edits.-**Design**:---Use-a-modal-overlay-with-a-card-style-design-for-the-profile-section.---Include-a-close-button-on-the-top-right-corner-of-the-modal.---Use-responsive-inputs-for-editable-fields-(e.g.,-dropdown-for-date-of-birth,-text-area-for-bio).-----####-**Technical-Requirements**-1.-**React-Components**:---Header---Recent-Chat-List---Chat-Bubble---Contextual-Menu-for-Messages---Profile-Modal-2.-**Dynamic-Interactions**:---Use-React’s-`useState`-and-`useEffect`-for-state-management.---Use-`React-Router`-for-navigation-between-pages.---Display-dynamic-error-or-success-messages-for-operations-(e.g.,-profile-update).-3.-**Styling-with-Tailwind-CSS**:---Use-Tailwind-for-all-styling,-ensuring-responsiveness-via-utility-classes.---Add-custom-styles-for-chat-bubbles,-modals,-and-buttons-as-needed.-4.-**Libraries**:---**React-Icons**-or-**Material-UI-Icons**-for-menu-and-action-buttons.---**Framer-Motion**-for-animations-(e.g.,-modal-entry/exit,-hover-effects).-5.-**Responsive-Design**:---Mobile:-Single-column-layout.---Tablet:-Two-column-layout-with-collapsible-side-menu.---Desktop:-Multi-column-layout-with-persistent-menu-and-dynamic-content-area.