Chat Interface - Copy this React, Tailwind Component to your project
----App-name-ChatVerse-Create-a-sleek-and-dynamic-chat-interface-UI-for-a-chat-application,-ensuring-responsiveness-across-mobile,-tablet,-and-desktop-screens.-Use-**HTML,-CSS-(Tailwind-CSS),-JavaScript,-PHP,-and-Firebase**-for-configuration.-The-design-should-include-the-following:-1.-**General-Layout-&-Style**---Use-a-modern,-minimalistic-layout-that-maintains-user-focus-on-the-chat-and-recent-messages.---Primary-color-palette:-Deep-blue-(#2D4F87),-light-gray-(#F3F4F6),-and-accent-color-(e.g.,-aqua-or-teal-for-buttons).---Fonts:-Choose-a-clean,-readable-font-(e.g.,-Inter-or-Roboto).---Icons:-Use-lightweight,-friendly-icons-from-a-set-like-Font-Awesome-or-custom-SVGs.-2.-**Messages-&-Recent-Chats-UI**---**Message-Bubble-Layout**:-Rounded-corner-message-bubbles,-using-slightly-varying-colors-for-sent-(e.g.,-light-blue)-vs.-received-(light-gray).---**Timestamps**:-Include-small,-readable-timestamps-below-messages.---**Read-Receipts**:-Use-checkmark-icons-for-read/delivered-status.---**Recent-Chats-View**:-Show-profile-images,-user-names,-last-message-preview,-and-timestamp-for-each-recent-chat.---**Status-Indicators**:-Use-small,-colored-dots-to-show-user-online/offline-status.-3.-**Menu-Icons-and-Items**---**Navigation-Menu-(Home,-Online-Users,-Blocked-Users,-Profile,-Logout)**:---**Icons**:-Use-intuitive-icons-(home,-user-check,-user-block,-profile,-and-logout)-with-tooltips.---**Hover-Effects**:-Slight-background-highlight-or-scaling-effect-on-hover-for-better-interactivity.---**Profile-Section**:-Include-user-profile-picture,-display-name,-and-status.-4.-**Responsive-Design**---**Mobile-View**:-Compact-navigation-bar-at-the-bottom-of-the-screen-with-icons-only.---**Tablet/Desktop-View**:-Expandable-side-navigation-for-easy-switching-between-menu-items.---**Dynamic-Message-Area**:-Adjusts-with-screen-size,-providing-an-optimized,-readable-layout.-5.-**Animations-and-Interactivity**---Smooth-animations-for-loading-new-messages,-sending,-and-receiving.---Dynamic-message-input-area-with-emoji,-file-attachment,-and-send-buttons.---Subtle-animations-for-toggling-between-screens-or-opening-the-profile-section.-6.-**HTML,-CSS,-and-JavaScript-Integration**---Use-**HTML**-for-the-structure,-**Tailwind-CSS**-for-the-styling,-and-**JavaScript**-for-the-interactive-elements-(e.g.,-showing-timestamps,-read-receipts,-status-updates).---**PHP-and-Firebase-Configuration**:-Use-PHP-for-backend-handling-(login/logout,-user-management)-and-Firebase-for-real-time-data-synchronization-and-authentication.-Responsive-ui-for-mobile-version-tab-desktop.
