Twitter Clone

A static Twitter UI clone built with HTML, CSS, Tailwind CSS, and JavaScript — focused on responsive layout and component recreation.

HTML

CSS

Tailwind CSS

JavaScript

Source Code Live Site

UI Clone

Type

Tailwind CSS

Styling

Responsive Layout

Focus

Why I built this

Cloning a complex UI like Twitter is one of the best ways to stress-test your CSS skills. The feed layout, sidebar, trending panel, and tweet cards all involve real layout challenges. I built this to cement my understanding of Tailwind CSS and practice building pixel-accurate interfaces from a visual reference.

How it works

The clone replicates Twitter's three-column layout using Tailwind's flexbox and grid utilities. The tweet feed supports interactions like likes, retweets, and comment counts — implemented with vanilla JavaScript event listeners that toggle button states. The responsive design collapses the sidebar panels at smaller breakpoints, matching Twitter's actual mobile behaviour.

Key decisions

Design choices

Tailwind CSS over custom CSS

Twitter's design is utility-heavy — lots of small spacing, border-radius, and color decisions. Tailwind's utility classes map almost directly to the design tokens Twitter uses, which made replication faster and more accurate than writing custom CSS from scratch.

Challenges

Problems solved

Getting the three-column layout sticky-right

Twitter's right sidebar stays fixed while the feed scrolls. Getting sticky positioning to work correctly across breakpoints — without it breaking the layout on tablet widths — required careful overflow and height management.

What I learned

Reverse-engineering an existing product's UI taught me more about component-thinking than building from a blank canvas. I learned to look at an interface and immediately break it into reusable layout primitives. I also got a real appreciation for how much work goes into making a layout feel effortless to the user.

TextUtils

BMW Website Clone