How I built a responsive UI with Tailwind in 20 mins?

Piyush Sahu — Thu, 12 Jun 2025 16:55:38 +0000

A real-world, time-boxed breakdown of building a clean, responsive layout using just Tailwind CSS.

👋 Why This Post?

I often get asked how to quickly prototype a clean UI without spending hours writing custom CSS or toggling between media queries.

So, I challenged myself to build a complete, responsive web layout in under 20 minutes — and Tailwind CSS made it surprisingly easy.

In this post, I’ll walk you through:

The layout structure
How I handled responsiveness
Tailwind tricks I used to speed things up

🧠 The Plan

I picked a simple, realistic layout:

A sticky navbar with logo and links.
A hero section with heading, text, and CTA button.
A responsive grid showing 3 cards. (like feature highlights or blog posts)
A dark footer with links.

No JavaScript. Just HTML + Tailwind CSS.

🔧 Tech Stack

Tailwind CSS via CDN (no build tools)
HTML (you can swap this with Next.js or React later)
Optional: Tailwind Play for instant testing.

⚙️ Step-by-Step Breakdown

Basic HTML Structure

<body class="font-sans text-gray-800 bg-white">     </body>

Start with a clean skeleton. The font-sans and text-gray-800 give a good base.

Navbar (Responsive Flex Layout)

<nav class="flex justify-between items-center p-4 shadow-md sticky top-0 bg-white z-10"> <div class="text-xl font-bold">MyBrand</div> <div class="space-x-4 hidden md:flex"> <a href="#" class="hover:text-blue-500">Home</a> <a href="#" class="hover:text-blue-500">About</a> <a href="#" class="hover:text-blue-500">Contact</a> </div> </nav>

hidden md:flex: hides links on small screens.
sticky top-0: keeps navbar fixed.

Hero Section

<section class="text-center py-20 px-6 bg-gray-100"> <h1 class="text-4xl md:text-5xl font-bold mb-4">Build UIs. Fast.</h1> <p class="text-lg md:text-xl text-gray-600 mb-6">Tailwind lets you design directly in your markup.</p> <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg"> Get Started </button> </section>

Uses text-4xl md:text-5xl for responsive font scaling.
Utility-first = no switching to CSS file.

Features Grid (Responsive Columns)

<section class="py-16 px-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white shadow-md p-6 rounded-lg"> <h3 class="text-xl font-semibold mb-2">Speed</h3> <p>Build layouts faster with prebuilt classes.</p> </div> <div class="bg-white shadow-md p-6 rounded-lg"> <h3 class="text-xl font-semibold mb-2">Flexibility</h3> <p>No opinionated styles, full control.</p> </div> <div class="bg-white shadow-md p-6 rounded-lg"> <h3 class="text-xl font-semibold mb-2">Responsiveness</h3> <p>Mobile-first classes that scale with you.</p> </div> </div> </section>

grid-cols-1 md:grid-cols-3: responsive column layout.
gap-8: spacing between cards.

Footer (Dark Theme)

Short, simple, clean.

Done in under 20 minutes (with time to spare).

💡 Quick Tips That Helped

Use md: and lg: breakpoints early for responsive tweaks.
Stick to a consistent padding/margin scale. (p-4, py-6, mb-4)
Tailwind UI or Heroicons can speed up design.
Try using @apply in real projects for reusability.

Conclusion

Tailwind CSS isn’t just hype — it genuinely speeds up frontend workflows without sacrificing design flexibility.

Whether you're prototyping or building production UIs, it helps keep things consistent and clean.

If you liked this post, drop a ❤️ or comment