Responsive Portfolio Page

In this guide, you'll build a clean, responsive portfolio layout using Tailwind CSS. It will include an introduction, project grid, and contact section.

Live Preview Mockup

Source: Tailwind Components – Portfolio Card Grid

1. Basic Structure

Start with a responsive container and sections:


<body class="bg-gray-100 text-gray-800">
  <header class="text-center py-10">
    <h1 class="text-4xl font-bold">John Doe</h1>
    <p class=" text-gray-600">Web Developer | UI Designer</p>
  </header>

  <main class="max-w-6xl mx-auto px-4">
    <!-- Project Grid Here -->
  </main>

  <footer class="text-center py-8 text-sm text-gray-500">
    © 2025 John Doe
  </footer>
</body>

2. Project Grid

Use a responsive grid for portfolio cards:


<section class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mb-12">
  <div class="bg-white rounded-lg shadow p-4">
    <img src="project1.jpg" alt="Project 1" class="rounded mb-4">
    <h3 class="text-xl font-semibold mb-2">E-Commerce Site</h3>
    <p class="text-gray-600">Built with React, Tailwind, Stripe integration.</p>
  </div>

  <div class="bg-white rounded-lg shadow p-4">
    <img src="project2.jpg" alt="Project 2" class="rounded mb-4">
    <h3 class="text-xl font-semibold mb-2">Portfolio Website</h3>
    <p class="text-gray-600">Responsive design with dark mode support.</p>
  </div>
</section>

3. Contact Section

Add a simple contact form or email link:


<section class="text-center">
  <h2 class="text-2xl font-bold mb-4">Let’s Work Together</h2>
  <p class="mb-6">Email me at <a href="mailto:you@example.com" class="text-blue-600  dark:text-blue-400 hover:underline">you@example.com</a></p>
</section>

Tips for Customization

Use hover effects like hover:shadow-xl on cards.
Add transitions using transition-all duration-300.
Use prose class if using Tailwind Typography plugin for blogs.

Conclusion

This responsive portfolio template is a great starting point to showcase your work with Tailwind. You can enhance it with animations, filters, or dark mode for a personalized touch.

← Previous: Integration with PostCSS and Vite Next: E-Commerce Product Grid →