Tailwind CSS Portfolio Sections

Explore various portfolio section layouts built with Tailwind CSS. These components are designed to be responsive and easy to integrate into your projects.

Each section includes a preview and the corresponding HTML code. Use the "Copy" button to quickly grab the code for your own use. Customize the styles further using Tailwind's utility classes.

Grid Portfolio Gallery

Project Title One

Short description of the project.

Project Title Two

Another brief description here.

Project Title Three

Details about the third item.

<!-- Grid Portfolio Gallery -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

  <!-- Item 1 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/seed/p1/400/300" alt="Portfolio Item 1" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="text-lg font-medium text-gray-800 mb-1">Project Title One</h3>
      <p class="text-sm text-gray-600">Short description of the project.</p>
    </div>
  </div>

  <!-- Item 2 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/seed/p2/400/300" alt="Portfolio Item 2" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="text-lg font-medium text-gray-800 mb-1">Project Title Two</h3>
      <p class="text-sm text-gray-600">Another brief description here.</p>
    </div>
  </div>

  <!-- Item 3 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/seed/p3/400/300" alt="Portfolio Item 3" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="text-lg font-medium text-gray-800 mb-1">Project Title Three</h3>
      <p class="text-sm text-gray-600">Details about the third item.</p>
    </div>
  </div>

  <!-- Add more items following the same structure -->

</div>
<!-- End Grid Portfolio Gallery -->

Filterable/Category-Based Portfolio (Layout Only)

Note: This component provides the HTML structure and styling for filter buttons and a portfolio grid. Actual filtering functionality requires JavaScript.

Web Project Alpha

Web Design

Brand Identity Beta

Branding

Web App Gamma

Web Design

Illustration Set Delta

Illustration

<!-- Filterable/Category-Based Portfolio (Layout Only) -->
<!-- Actual filtering requires JavaScript to show/hide items based on button clicks and data-category attributes. -->
<div>
  <!-- Filter Buttons (JavaScript needed to handle clicks) -->
  <div class="flex flex-wrap justify-center space-x-2 mb-8">
    <button class="px-4 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 mb-2" data-filter="all">All</button>
    <button class="px-4 py-1 bg-gray-200 text-gray-700 text-sm rounded hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 mb-2" data-filter="web">Web Design</button>
    <button class="px-4 py-1 bg-gray-200 text-gray-700 text-sm rounded hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 mb-2" data-filter="branding">Branding</button>
    <button class="px-4 py-1 bg-gray-200 text-gray-700 text-sm rounded hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 mb-2" data-filter="illustration">Illustration</button>
    <!-- Add more category buttons as needed -->
  </div>

  <!-- Portfolio Grid (Items need data-category attribute for JS filtering) -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Item 1 (Example: Web Design) -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden portfolio-item" data-category="web"> <!-- Add a common class like 'portfolio-item' for easier JS selection -->
      <img src="https://picsum.photos/seed/f1/400/300" alt="Portfolio Item 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-medium text-gray-800 mb-1">Web Project Alpha</h3>
        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded">Web Design</span>
      </div>
    </div>

    <!-- Item 2 (Example: Branding) -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden portfolio-item" data-category="branding">
      <img src="https://picsum.photos/seed/f2/400/300" alt="Portfolio Item 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-medium text-gray-800 mb-1">Brand Identity Beta</h3>
        <span class="text-xs bg-purple-100 text-purple-600 px-2 py-0.5 rounded">Branding</span>
      </div>
    </div>

    <!-- Item 3 (Example: Web Design) -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden portfolio-item" data-category="web">
      <img src="https://picsum.photos/seed/f3/400/300" alt="Portfolio Item 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-medium text-gray-800 mb-1">Web App Gamma</h3>
        <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded">Web Design</span>
      </div>
    </div>

    <!-- Item 4 (Example: Illustration) -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden portfolio-item" data-category="illustration">
      <img src="https://picsum.photos/seed/f4/400/300" alt="Portfolio Item 4" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-medium text-gray-800 mb-1">Illustration Set Delta</h3>
        <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded">Illustration</span>
      </div>
    </div>

    <!-- Add more items with appropriate data-category attributes -->

  </div>
</div>
<!-- End Filterable Portfolio Layout -->

Large Feature Showcase

Featured Work

Major Client Project

Detailed description of the featured project, highlighting key achievements, challenges overcome, and the value delivered to the client. This section allows for more in-depth storytelling about a significant piece of work.

View Case Study

Completed by WPDean

<!-- Large Feature Showcase -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden md:flex">

  <!-- Image Section -->
  <div class="md:w-1/2">
    <img src="https://picsum.photos/seed/s1/800/600" alt="Featured Project" class="w-full h-64 md:h-full object-cover">
  </div>

  <!-- Content Section -->
  <div class="md:w-1/2 p-6 md:p-8 flex flex-col justify-center">
    <span class="text-sm font-semibold text-blue-600 mb-1">Featured Work</span>
    <h3 class="text-2xl font-bold text-gray-900 mb-3">Major Client Project</h3>
    <p class="text-gray-600 text-base mb-4">
      Detailed description of the featured project, highlighting key achievements, challenges overcome, and the value delivered to the client. This section allows for more in-depth storytelling about a significant piece of work.
    </p>
    <div class="mt-auto"> <!-- Pushes button to bottom if content is short -->
       <a href="#" class="inline-block bg-gray-800 text-white px-5 py-2 rounded-md text-sm font-medium hover:bg-gray-700 transition duration-200">View Case Study</a>
       <!-- Optional: Logo/Brand mention -->
       <p class="text-xs text-gray-400 mt-4">Completed by <span class="text-blue-600 font-semibold">WPDean</span></p>
    </div>
  </div>

</div>
<!-- End Large Feature Showcase -->

Hover-Effect Portfolio Cards

Project Hover One

View Details

Project Hover Two

Split Layout Portfolio (Image + Description)

Project Title Here

A brief description of the project, highlighting key features, technologies used, or the problem solved. Keep it concise and engaging.

View Project

<!-- Split Layout Portfolio Section -->
<div class="bg-white p-6 rounded-lg shadow">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
    <div>
      <img src="https://picsum.photos/600/400?random=1" alt="Portfolio Item Image" class="rounded-lg shadow-md w-full h-auto object-cover">
    </div>
    <div class="text-center md:text-left">
      <h3 class="text-2xl font-bold text-gray-800 mb-3">Project Title Here</h3>
      <p class="text-gray-600 mb-4 text-base">
        A brief description of the project, highlighting key features, technologies used, or the problem solved. Keep it concise and engaging.
      </p>
      <a href="#" class="inline-block bg-blue-600 text-white px-5 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition duration-200">
        View Project
      </a>
    </div>
  </div>
</div>

Case Study Preview Section

Case Study One

Short preview of the case study. Discuss the client, challenge, and the solution's impact briefly.

Read Full Study →

Case Study Two

Another case study summary goes here, outlining the key aspects and outcomes.

Read Full Study →

Case Study Three

Summarize the third case study, focusing on achievements and results.

Read Full Study →

<!-- Case Study Preview Section -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

  <!-- Case Study Card 1 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/300?random=2" alt="Case Study Image 1" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Case Study One</h3>
      <p class="text-gray-600 text-sm mb-4">
        Short preview of the case study. Discuss the client, challenge, and the solution's impact briefly.
      </p>
      <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Read Full Study →</a>
    </div>
  </div>

  <!-- Case Study Card 2 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/300?random=3" alt="Case Study Image 2" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Case Study Two</h3>
      <p class="text-gray-600 text-sm mb-4">
        Another case study summary goes here, outlining the key aspects and outcomes.
      </p>
      <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Read Full Study →</a>
    </div>
  </div>

  <!-- Case Study Card 3 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/300?random=4" alt="Case Study Image 3" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Case Study Three</h3>
      <p class="text-gray-600 text-sm mb-4">
        Summarize the third case study, focusing on achievements and results.
      </p>
      <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Read Full Study →</a>
    </div>
  </div>

</div>

Featured Project Section

Featured Project

Major Client Redesign

Detailed description of the featured project. This section allows for more text to explain the scope, process, challenges, and the final, successful outcome delivered for WPDean or another client.

UI/UX Design Development Branding

View Live Site

<!-- Featured Project Section -->
<div class="bg-white p-8 rounded-lg shadow-lg">
  <div class="flex flex-col lg:flex-row gap-8 lg:gap-12 items-center">
    <!-- Image -->
    <div class="lg:w-1/2">
      <img src="https://picsum.photos/800/500?random=5" alt="Featured Project Image" class="rounded-lg shadow-md w-full h-auto object-cover">
    </div>
    <!-- Content -->
    <div class="lg:w-1/2 text-center lg:text-left">
      <span class="text-sm font-semibold text-blue-600 uppercase tracking-wider">Featured Project</span>
      <h3 class="text-3xl font-extrabold text-gray-900 mt-2 mb-4">Major Client Redesign</h3>
      <p class="text-gray-600 text-lg mb-6">
        Detailed description of the featured project. This section allows for more text to explain the scope, process, challenges, and the final, successful outcome delivered for <span class="text-blue-600 font-bold">WPDean</span> or another client.
      </p>
      <div class="flex flex-wrap justify-center lg:justify-start gap-2 mb-6">
        <span class="bg-gray-200 text-gray-700 text-xs font-medium px-3 py-1 rounded-full">UI/UX Design</span>
        <span class="bg-gray-200 text-gray-700 text-xs font-medium px-3 py-1 rounded-full">Development</span>
        <span class="bg-gray-200 text-gray-700 text-xs font-medium px-3 py-1 rounded-full">Branding</span>
      </div>
      <a href="#" class="inline-block bg-gray-800 text-white px-6 py-3 rounded-lg text-base font-medium hover:bg-gray-900 transition duration-200">
        View Live Site
      </a>
    </div>
  </div>
</div>

Minimal Portfolio Thumbnails

<!-- Minimal Portfolio Thumbnails Section -->
<!-- Add these styles to your CSS for the hover effect:
.portfolio-thumbnail-minimal a:hover img {
    transform: scale(1.05);
    opacity: 0.85;
}
 .portfolio-thumbnail-minimal img {
    transition: transform 0.3s ease, opacity 0.3s ease;
 }
-->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
  <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=6" alt="Minimal Thumbnail 1" class="w-full h-full object-cover">
    </a>
  </div>
  <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=7" alt="Minimal Thumbnail 2" class="w-full h-full object-cover">
    </a>
  </div>
  <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=8" alt="Minimal Thumbnail 3" class="w-full h-full object-cover">
    </a>
  </div>
  <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=9" alt="Minimal Thumbnail 4" class="w-full h-full object-cover">
    </a>
  </div>
  <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=10" alt="Minimal Thumbnail 5" class="w-full h-full object-cover">
    </a>
  </div>
  <!-- Add more items as needed -->
   <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=11" alt="Minimal Thumbnail 6" class="w-full h-full object-cover">
    </a>
  </div>
   <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=12" alt="Minimal Thumbnail 7" class="w-full h-full object-cover">
    </a>
  </div>
   <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=13" alt="Minimal Thumbnail 8" class="w-full h-full object-cover">
    </a>
  </div>
   <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=14" alt="Minimal Thumbnail 9" class="w-full h-full object-cover">
    </a>
  </div>
   <div class="portfolio-thumbnail-minimal">
    <a href="#" class="block overflow-hidden rounded-lg shadow-sm aspect-square">
      <img src="https://picsum.photos/300/300?random=15" alt="Minimal Thumbnail 10" class="w-full h-full object-cover">
    </a>
  </div>
</div>

Portfolio with Load More/Pagination

Project Alpha

Brief description of Project Alpha.

View Details

Project Beta

Brief description of Project Beta.

View Details

Project Gamma

Brief description of Project Gamma.

View Details

Project Delta

Brief description of Project Delta.

View Details

Project Epsilon

Brief description of Project Epsilon.

View Details

Project Zeta

Brief description of Project Zeta.

View Details

<!-- Portfolio Section with Load More / Pagination -->

<!-- Portfolio Grid (Example with 6 items) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
  <!-- Card 1 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/300?random=16" alt="Portfolio Image 1" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Project Alpha</h3>
      <p class="text-gray-600 text-sm mb-4">Brief description of Project Alpha.</p>
      <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Details</a>
    </div>
  </div>
  <!-- Card 2 -->
   <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/300?random=17" alt="Portfolio Image 2" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Project Beta</h3>
      <p class="text-gray-600 text-sm mb-4">Brief description of Project Beta.</p>
      <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Details</a>
    </div>
  </div>
  <!-- Card 3 -->
   <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/300?random=18" alt="Portfolio Image 3" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Project Gamma</h3>
      <p class="text-gray-600 text-sm mb-4">Brief description of Project Gamma.</p>
      <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Details</a>
    </div>
  </div>
   <!-- Card 4 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/300?random=19" alt="Portfolio Image 4" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Project Delta</h3>
      <p class="text-gray-600 text-sm mb-4">Brief description of Project Delta.</p>
      <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Details</a>
    </div>
  </div>
  <!-- Card 5 -->
   <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/300?random=20" alt="Portfolio Image 5" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Project Epsilon</h3>
      <p class="text-gray-600 text-sm mb-4">Brief description of Project Epsilon.</p>
      <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Details</a>
    </div>
  </div>
  <!-- Card 6 -->
   <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://picsum.photos/400/300?random=21" alt="Portfolio Image 6" class="w-full h-48 object-cover">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Project Zeta</h3>
      <p class="text-gray-600 text-sm mb-4">Brief description of Project Zeta.</p>
      <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Details</a>
    </div>
  </div>
  <!-- Add more portfolio items here -->
</div>

<!-- Option 1: Load More Button (Requires JavaScript logic) -->
<div class="text-center mb-8">
  <button class="bg-blue-600 text-white px-6 py-3 rounded-lg text-base font-medium hover:bg-blue-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
    Load More Projects
  </button>
</div>

<!-- Option 2: Simple Pagination (HTML Structure Only) -->
<nav aria-label="Pagination" class="flex justify-center items-center space-x-2">
  <a href="#" class="px-4 py-2 border border-gray-300 rounded-md text-gray-500 hover:bg-gray-100">
    « Previous
  </a>
  <a href="#" class="px-4 py-2 border border-blue-500 bg-blue-500 text-white rounded-md" aria-current="page">1</a>
  <a href="#" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100">2</a>
  <a href="#" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100">3</a>
  <span class="px-4 py-2 text-gray-500">...</span>
  <a href="#" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100">10</a>
  <a href="#" class="px-4 py-2 border border-gray-300 rounded-md text-gray-500 hover:bg-gray-100">
    Next »
  </a>
</nav>

Portfolio with Modal Popups (Grid Only)

<!-- Portfolio Grid for Modal Popups -->
<!-- Note: Add your own JavaScript/library (e.g., Alpine.js) to handle modal opening based on the 'data-modal-target' attribute on the button. -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">

  <!-- Item 1 -->
  <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md">
    <img src="https://picsum.photos/400/400?random=22" alt="Project Thumbnail 1" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-300 flex items-center justify-center">
      <!-- Button triggers the modal. Use data-modal-target or similar for your JS -->
      <button data-modal-target="#project-modal-1" class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-sm bg-blue-600 px-3 py-1 rounded hover:bg-blue-700">View Details</button>
    </div>
  </div>

  <!-- Item 2 -->
  <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md">
    <img src="https://picsum.photos/400/400?random=23" alt="Project Thumbnail 2" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-300 flex items-center justify-center">
      <button data-modal-target="#project-modal-2" class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-sm bg-blue-600 px-3 py-1 rounded hover:bg-blue-700">View Details</button>
    </div>
  </div>

  <!-- Item 3 -->
  <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md">
    <img src="https://picsum.photos/400/400?random=24" alt="Project Thumbnail 3" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-300 flex items-center justify-center">
      <button data-modal-target="#project-modal-3" class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-sm bg-blue-600 px-3 py-1 rounded hover:bg-blue-700">View Details</button>
    </div>
  </div>

  <!-- Item 4 -->
  <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md">
    <img src="https://picsum.photos/400/400?random=25" alt="Project Thumbnail 4" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-300 flex items-center justify-center">
      <button data-modal-target="#project-modal-4" class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-sm bg-blue-600 px-3 py-1 rounded hover:bg-blue-700">View Details</button>
    </div>
  </div>

  <!-- Add more items as needed -->
</div>

<!-- Example Modal Structure (Hidden by default - You need JS to show/hide this) -->
<!--
<div id="project-modal-1" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50 hidden">
  <div class="bg-white rounded-lg shadow-xl p-6 max-w-2xl w-full">
    <h2 class="text-2xl font-bold mb-4">Project Title 1</h2>
    <img src="https://picsum.photos/600/400?random=22" alt="Project Detail Image 1" class="w-full h-auto object-cover rounded mb-4">
    <p class="text-gray-700 mb-4">Detailed description for Project 1...</p>
    <button onclick="closeModal('#project-modal-1')" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Close</button> <!-- Needs JS -->
  </div>
</div>
-->

Portfolio with Tags or Tech Stack Labels

Web Application

Built a custom dashboard using modern web technologies.

{/* Pushes tags to bottom */}

React Node.js Tailwind CSS

Mobile App Design

Designed intuitive user interfaces for a cross-platform mobile app.

Figma UX Research Prototyping

E-commerce Platform

Developed a scalable online store with payment integration.

WordPress WooCommerce PHP

<!-- Portfolio Section with Tags/Tech Stack Labels -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

  <!-- Card 1 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
    <img src="https://picsum.photos/400/300?random=26" alt="Portfolio Image 1" class="w-full h-48 object-cover">
    <div class="p-6 flex flex-col flex-grow">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Web Application</h3>
      <p class="text-gray-600 text-sm mb-4 flex-grow">
        Built a custom dashboard using modern web technologies.
      </p>
      <!-- Tags Container -->
      <div class="mt-auto"> <!-- Pushes tags to bottom -->
        <div class="flex flex-wrap gap-2">
          <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">React</span>
          <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Node.js</span>
          <span class="bg-pink-100 text-pink-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Tailwind CSS</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
    <img src="https://picsum.photos/400/300?random=27" alt="Portfolio Image 2" class="w-full h-48 object-cover">
    <div class="p-6 flex flex-col flex-grow">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">Mobile App Design</h3>
      <p class="text-gray-600 text-sm mb-4 flex-grow">
        Designed intuitive user interfaces for a cross-platform mobile app.
      </p>
      <div class="mt-auto">
        <div class="flex flex-wrap gap-2">
          <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Figma</span>
          <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full">UX Research</span>
          <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Prototyping</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Card 3 -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
    <img src="https://picsum.photos/400/300?random=28" alt="Portfolio Image 3" class="w-full h-48 object-cover">
    <div class="p-6 flex flex-col flex-grow">
      <h3 class="text-lg font-semibold text-gray-800 mb-2">E-commerce Platform</h3>
      <p class="text-gray-600 text-sm mb-4 flex-grow">
        Developed a scalable online store with payment integration.
      </p>
      <div class="mt-auto">
        <div class="flex flex-wrap gap-2">
          <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">WordPress</span>
          <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full">WooCommerce</span>
          <span class="bg-orange-100 text-orange-800 text-xs font-medium px-2.5 py-0.5 rounded-full">PHP</span>
        </div>
      </div>
    </div>
  </div>

</div>

Vertical Scrolling Portfolio

Recent Projects

Project Alpha

A modern web application built with React and Node.js.

Web Development

Brand Identity Beta

Complete branding package including logo design and style guide.

Branding

Mobile App Gamma

Cross-platform mobile application using Flutter.

Mobile App

E-commerce Platform Delta

Scalable online store built on Shopify with custom theme.

Web Development

UI/UX Redesign Epsilon

User interface and experience overhaul for a legacy system.

UI/UX Design

<!-- Vertical Scrolling Portfolio Section -->
<div class="max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
    <div class="px-4 py-3 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-800">Recent Projects</h3>
    </div>
    <div class="h-96 overflow-y-auto p-4">
        <div class="space-y-4">
            <!-- Portfolio Item 1 -->
            <div class="flex items-start space-x-4 p-3 hover:bg-gray-50 rounded-md transition duration-150 ease-in-out">
                <!-- Use a real image URL -->
                <img src="https://picsum.photos/80/80?random=1" alt="Project Thumbnail" class="w-20 h-20 rounded-md object-cover flex-shrink-0">
                <div>
                    <h4 class="text-md font-semibold text-gray-800">Project Alpha</h4>
                    <p class="text-sm text-gray-600 mt-1">A modern web application built with React and Node.js.</p>
                    <span class="text-xs text-blue-600 font-medium mt-1 inline-block">Web Development</span>
                </div>
            </div>
            <!-- Portfolio Item 2 -->
            <div class="flex items-start space-x-4 p-3 hover:bg-gray-50 rounded-md transition duration-150 ease-in-out">
                 <!-- Use a real image URL -->
                <img src="https://picsum.photos/80/80?random=2" alt="Project Thumbnail" class="w-20 h-20 rounded-md object-cover flex-shrink-0">
                <div>
                    <h4 class="text-md font-semibold text-gray-800">Brand Identity Beta</h4>
                    <p class="text-sm text-gray-600 mt-1">Complete branding package including logo design and style guide.</p>
                    <span class="text-xs text-purple-600 font-medium mt-1 inline-block">Branding</span>
                </div>
            </div>
            <!-- Portfolio Item 3 -->
            <div class="flex items-start space-x-4 p-3 hover:bg-gray-50 rounded-md transition duration-150 ease-in-out">
                 <!-- Use a real image URL -->
                <img src="https://picsum.photos/80/80?random=3" alt="Project Thumbnail" class="w-20 h-20 rounded-md object-cover flex-shrink-0">
                <div>
                    <h4 class="text-md font-semibold text-gray-800">Mobile App Gamma</h4>
                    <p class="text-sm text-gray-600 mt-1">Cross-platform mobile application using Flutter.</p>
                    <span class="text-xs text-green-600 font-medium mt-1 inline-block">Mobile App</span>
                </div>
            </div>
             <!-- Portfolio Item 4 -->
            <div class="flex items-start space-x-4 p-3 hover:bg-gray-50 rounded-md transition duration-150 ease-in-out">
                 <!-- Use a real image URL -->
                <img src="https://picsum.photos/80/80?random=4" alt="Project Thumbnail" class="w-20 h-20 rounded-md object-cover flex-shrink-0">
                <div>
                    <h4 class="text-md font-semibold text-gray-800">E-commerce Platform Delta</h4>
                    <p class="text-sm text-gray-600 mt-1">Scalable online store built on Shopify with custom theme.</p>
                    <span class="text-xs text-blue-600 font-medium mt-1 inline-block">Web Development</span>
                </div>
            </div>
             <!-- Portfolio Item 5 -->
            <div class="flex items-start space-x-4 p-3 hover:bg-gray-50 rounded-md transition duration-150 ease-in-out">
                 <!-- Use a real image URL -->
                <img src="https://picsum.photos/80/80?random=5" alt="Project Thumbnail" class="w-20 h-20 rounded-md object-cover flex-shrink-0">
                <div>
                    <h4 class="text-md font-semibold text-gray-800">UI/UX Redesign Epsilon</h4>
                    <p class="text-sm text-gray-600 mt-1">User interface and experience overhaul for a legacy system.</p>
                    <span class="text-xs text-red-600 font-medium mt-1 inline-block">UI/UX Design</span>
                </div>
            </div>
            <!-- Add more portfolio items as needed -->
        </div>
    </div>
</div>

Portfolio Grid with CTA Button

Our Work

Explore Our Portfolio

Check out some of the amazing projects we've delivered for our clients.

Corporate Website Redesign

Complete overhaul of a B2B company's online presence.

View Project →

SaaS Platform UI Kit

Designed a comprehensive UI kit for a growing software service.

View Project →

Mobile Fitness App

Developed an intuitive and engaging fitness tracking application.

View Project →

Interested in working with us?

Get a Free Quote

<!-- Portfolio Grid with CTA Button Section -->
<div class="bg-gray-50 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
             <h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Our Work</h2>
             <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                 Explore Our Portfolio
             </p>
             <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                 Check out some of the amazing projects we've delivered for our clients.
             </p>
        </div>

        <div class="mt-10 grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            <!-- Portfolio Item 1 -->
            <div class="bg-white overflow-hidden shadow rounded-lg transform transition duration-300 hover:scale-105">
                 <!-- Use a real image URL -->
                <img class="h-48 w-full object-cover" src="https://picsum.photos/400/300?random=10" alt="Project Image">
                <div class="p-6">
                    <h3 class="text-lg font-medium text-gray-900">Corporate Website Redesign</h3>
                    <p class="mt-2 text-sm text-gray-500">Complete overhaul of a B2B company's online presence.</p>
                    <a href="#" class="mt-3 inline-block text-sm font-medium text-blue-600 hover:text-blue-500">View Project &rarr;</a>
                </div>
            </div>
            <!-- Portfolio Item 2 -->
            <div class="bg-white overflow-hidden shadow rounded-lg transform transition duration-300 hover:scale-105">
                 <!-- Use a real image URL -->
                <img class="h-48 w-full object-cover" src="https://picsum.photos/400/300?random=11" alt="Project Image">
                <div class="p-6">
                    <h3 class="text-lg font-medium text-gray-900">SaaS Platform UI Kit</h3>
                    <p class="mt-2 text-sm text-gray-500">Designed a comprehensive UI kit for a growing software service.</p>
                     <a href="#" class="mt-3 inline-block text-sm font-medium text-blue-600 hover:text-blue-500">View Project &rarr;</a>
                </div>
            </div>
             <!-- Portfolio Item 3 -->
            <div class="bg-white overflow-hidden shadow rounded-lg transform transition duration-300 hover:scale-105">
                 <!-- Use a real image URL -->
                <img class="h-48 w-full object-cover" src="https://picsum.photos/400/300?random=12" alt="Project Image">
                <div class="p-6">
                    <h3 class="text-lg font-medium text-gray-900">Mobile Fitness App</h3>
                    <p class="mt-2 text-sm text-gray-500">Developed an intuitive and engaging fitness tracking application.</p>
                     <a href="#" class="mt-3 inline-block text-sm font-medium text-blue-600 hover:text-blue-500">View Project &rarr;</a>
                </div>
            </div>
            <!-- Add more portfolio items as needed -->
        </div>

        <!-- CTA Section -->
        <div class="mt-12 text-center">
            <p class="text-lg text-gray-600 mb-4">Interested in working with us?</p>
            <a href="#" class="inline-block px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition duration-150 ease-in-out">
                Get a Free Quote
            </a>
             
        </div>
    </div>
</div>

FAQ on Tailwind CSS Portfolio Sections

How do I create a responsive hero section using Tailwind CSS?

Build a hero section with utility-first approach using Tailwind's responsive breakpoints. Start with a container div and add flex properties. Use classes like h-screen, flex items-center, and responsive modifiers (md:, lg:) for different screen sizes. Modern portfolio styling requires adjustments at each breakpoint for mobile-first design.

What are the best practices for designing portfolio project showcases?

Project showcase elements should highlight your work samples presentation effectively. Use Tailwind's grid system with grid-cols-1 md:grid-cols-2 lg:grid-cols-3 for responsive layouts. Include consistent spacing, clear typography customization, and image hover effects. Focus on visual storytelling sections that communicate your skills display component.

How can I implement dark mode for my portfolio sections?

Tailwind CSS offers built-in dark mode support. Add the dark: prefix to classes you want applied in dark mode. For example: bg-white dark:bg-gray-800 or text-gray-800 dark:text-gray-200. Implement a dark mode toggle with JavaScript. Portfolio theming options enhance user experience.

What's the most efficient way to create a contact form in Tailwind?

Contact form styling is straightforward with Tailwind. Use form elements with classes like form-input, add padding and borders with p-2 border. Style submit buttons as call to action buttons with bg-blue-500 hover:bg-blue-600. Ensure responsiveness and accessibility features for better conversion.

How do I build an about me section that stands out?

Your about me section should reflect personal branding sections using typography that matches your style. Structure with flex or grid layouts. Use subtle animation effects to highlight key information. Include professional images and consider component reusability for consistent design across your developer resume website.

What's the best approach for displaying skills in a Tailwind portfolio?

Create a skills display component using Tailwind's flexbox (flex flex-wrap) or grid system. Consider using SVG icon integration to represent technologies. Color scheme configuration should align with your portfolio's theme. Group related front-end development skills and add progress indicators if appropriate.

How can I create a testimonial section that looks professional?

Design testimonial blocks using cards with rounded-lg shadow-md classes. Maintain consistent padding and typography. Include client photos, quotation marks, and proper spacing. Implement a carousel for multiple testimonials. This enhances your professional showcase template and builds credibility.

What's the best way to organize the navigation menu of my portfolio?

Navigation menu design should be clean and intuitive. Use flex justify-between items-center for the container. Add hidden md:flex for mobile responsive portfolio navigation. Consider a hamburger menu for small screens. Ensure proper contrast and hover states for optimal web accessibility.

How can I optimize performance in my Tailwind CSS portfolio?

Focus on portfolio performance optimization by purging unused CSS with Tailwind's built-in features. Implement portfolio loading optimization techniques like lazy loading images. Minimize JavaScript usage and leverage browser caching. Consider using Vercel or GitHub Pages for hosting.

How do I create an experience timeline for my portfolio?

Build an experience timeline using relative positioning with relative and absolute classes. Create vertical lines with w-0.5 bg-gray-200 and use rounded-full circles for timeline nodes. Add content cards that alternate sides for visual interest. This effectively showcases your career highlights display.