DEV Community

Piyush Sahu
Piyush Sahu

Posted on

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

#webdev #nextjs #react

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">
<!-- Navbar -->
<!-- Hero -->
<!-- Features Grid -->
<!-- Footer -->
</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)

<footer class="bg-gray-900 text-white py-6 text-center">
<p>&copy; 2025 MyBrand. All rights reserved.</p>
</footer>

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

Top comments (0)