A responsive Twitter/X clone built using HTML and Tailwind CSS, replicating the modern design of the X (formerly Twitter) home interface.
This project demonstrates layout design, responsive styling, and UI/UX structuring for social media platforms.
✅ Fully responsive layout for mobile, tablet, and desktop
✅ Sidebar navigation with icons (Home, Explore, Notifications, etc.)
✅ Tweet composer section (“What’s happening?” input area)
✅ Realistic post design with images, likes, comments, and shares
✅ Trending section (“What’s Happening”)
✅ “Who to Follow” section
✅ Sticky top navigation and sidebar
✅ Dark theme (modern Twitter/X look)
| Technology | Description |
|---|---|
| HTML5 | Structure and content |
| Tailwind CSS | Styling and layout design |
| Google Material Symbols | For iconography |
| SVG Logo | X (Twitter) logo |
| Responsive Design | Built using flexbox and Tailwind breakpoints |
project-folder/ │ ├── index.html # Main HTML file ├── css/ │ └── output.css # Tailwind CSS compiled file └── README.md # Project documentation
Follow these steps to run this project locally 👇
git clone https://github.com/yourusername/x-homepage-clone.git
2️⃣ Navigate into the project directory
cd x-homepage-clone
3️⃣ Open the project
Simply open the index.html file in your browser:
start index.html
Or, if using VS Code:
code .
Then right-click index.html → “Open with Live Server” (recommended).
🧩 Tailwind Setup (Optional)
If you wish to modify the Tailwind CSS or rebuild output.css, follow these steps:
Install Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init
Configure Tailwind
In your tailwind.config.js:
content: ["./*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
Build CSS
npx tailwindcss -i ./input.css -o ./css/output.css --watch
📸 Preview
Here’s how your page will look 👇
🖥️ Desktop View
Sidebar on the left
Feed in the center
Trending & Follow sections on the right
📱 Mobile View
Collapsed sidebar icons
Full feed focus
👨💻 Author
Hayat Ali
🎓 3rd Year CSE Student — JECRC Foundation, Jaipur
📍 From Makrana, Didwana, Kuchaman
📧 hayatali123786@gmail.com
📝 License
This project is open source and available under the MIT License.
⭐ Support
If you like this project, please consider giving it a ⭐ on GitHub
— it motivates me to keep building!
Enjoy coding 🧑💻 & stay creative!
---
Would you like me to include a **live demo section** (with deployment guide for GitHub Pages or Vercel)?
It’ll make your README perfect for showcasing your project online.