📸 Instagram Clone UI

A modern Instagram-like User Interface built with HTML, Tailwind CSS, and JavaScript. This responsive web UI replicates key components of Instagram, including stories, sliders, navigation, and post interactions — perfect for frontend development practice or portfolio showcase.

---

🚀 Features

• ✅ Responsive Design for mobile, tablet, and desktop
• 🧭 Top and Bottom Navigation Bars (mobile-friendly)
• 📜 Sidebar Navigation (mobile toggle + desktop static)
• 📷 Stories Section with gradient ring design
• 🖼️ Image Slider for posts using JavaScript
• ❤️ Interactive Buttons (like, comment, share, save)
• ✍️ Styled Profile Headers, Captions & Comments

---

💻 Technologies Used

Technology	Purpose
HTML5	Structure
Tailwind CSS	Styling and Layout
JavaScript	Interactivity (slider, sidebar)
Font Awesome	Icons

---

📁 Folder Structure

project-root/ │ ├── index.html ├── output.css (compiled Tailwind) ├── /Images │ ├── Instagram_icon.png.webp │ ├── profile1.jpg │ ├── img1.jpg, img2.jpg, ... ├── /JS │ └── script.js (for slider/sidebar) ├── README.md

yaml Copy Edit

---

📝 How to Run

1. Clone/download the project
2. Open index.html in your browser
3. Make sure image paths are correct if using locally
4. Explore mobile and desktop views

---

📷 Preview

----------------------------------------------------------

---

👨‍💻 Author

Mirza Taha
Frontend Developer