MB
Muhammed Bilal

Whats App Clone - Copy this React, Tailwind Component to your project

Create a fully functional and beautifully designed chatbox component using React and Tailwind CSS, inspired by WhatsApp Web. The layout should include a left sidebar with a sticky top search bar and a scrollable list of contacts, each showing a profile picture, name, last message preview, and timestamp. Clicking on a contact should load their chat in the right panel. The right chat panel must have a sticky top header showing the selected user's name, profile picture, and online/offline status, which stays fixed during scroll. Below, display the full chat history with styled message bubbles aligned left and right, including timestamps. At the bottom, include a message input area with a textarea, send button, emoji picker toggle button, a close (X) button to hide the emoji panel, and a file attachment button to send files such as images or documents. The input should support "Enter" to send messages and "Shift + Enter" for new lines. Use React useState for local state management with dummy data. Ensure a clean, responsive, and modern UI, and do not include call or video call options.

Prompt
Component Preview

About

WhatsAppClone - Create a sleek chatbox with a user list, chat panel, and input box. Built with React and Tailwind for a polished look. Get instant access!

Share

Last updated 1 month ago