Inbox Messaging U I - Copy this Html, Tailwind Component to your project

Create a clean and intuitive UI for an inbox messaging page with two main sections: Left Sidebar (30% width): Display the list of people the user has previously chatted with. Each contact should include a profile picture, name, and timestamp of the last message. Add subtle hover effects for each contact to enhance interactivity. Main Chat Area (70% width): This section will show the chat messages. Messages should be styled as chat bubbles, aligned left for the other person and right for the current user. Include timestamps below each message. Chat Input Field (bottom of the page): At the bottom of the chat area, add an input field for sending new messages. This should include a text box, a send button, and an emoji button. Use a minimalist color scheme with modern typography and soft shadow effects for a professional look. Make the design responsive for mobile, with the sidebar collapsing into a dropdown on smaller screens.