Skip to content

Agency Case Study Grid with Images

Dark Tailwind CSS portfolio grid of agency case studies with project photos, client, year, key results and service filter buttons.

Also known as: portfolio grid, case study cards, agency work section, filterable project grid

Tailwind CSS Portfolios Responsive Dark #card #case-study #filter #grid #portfolio #responsive

Agency Case Study Grid with Images live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

A dark, editorial case study grid for agency and studio portfolios, built with Tailwind CSS and a small vanilla JavaScript filter. Each card pairs a project photo with the client, the year, a one-line story and two headline results, so visitors see outcomes before they click through to the full case study.

How it works

The root is section.acs-work. Its header holds the eyebrow, the heading and a role="group" of filter buttons, each with a data-acs-filter value (all, branding, product, web) and an aria-pressed state. Tailwind's aria-pressed: variants paint the active button lime, so no classes are swapped by hand.

The cards live in a ul grid that is one column on phones, two from sm and three from lg. Every li.acs-card carries data-acs-category and contains a 16:10 object-cover image with a service badge, a client and year line, an h3 with the case study link and a dl with two results. The link uses after:absolute after:inset-0 to stretch over the whole card, so the entire card is clickable while the accessible name stays the short title. mt-auto on the dl keeps result rows aligned when titles wrap.

On DOMContentLoaded the script initializes every .acs-work. A click on a filter button calls applyFilter(), which updates aria-pressed, sets hidden on cards whose category does not match, replays the acs-in entrance animation on cards that return through .acs-card--in, and writes a summary such as "Showing 2 of 6 case studies in Web." into the status region. Without JavaScript all six cards stay visible.

Customization

  • --acs-accent in style.css: changes the hover underline and the focus ring around a card; also replace lime-300 in the markup for the badges, results and active filter.
  • data-acs-category on each li.acs-card and data-acs-filter on the buttons: add your own services, for example strategy or motion.
  • aspect-[16/10] on .acs-img: use aspect-square or aspect-[4/5] for portrait-led work.
  • sm:grid-cols-2 lg:grid-cols-3 on the ul: switch to xl:grid-cols-4 for a denser wall of projects.
  • bg-neutral-950 on .acs-work: swap for bg-stone-100 and dark text utilities for a light version.
  • transform: scale(1.05) in the .acs-card:hover .acs-img rule: increase or remove the hover zoom.
  • Add a third div inside a card's dl and change grid-cols-2 to grid-cols-3 to show more results.

Use cases

  • Design agencies: cards pair a project photo with client, year and two headline results
  • Studio portfolios: filter buttons narrow the grid to branding, product or web projects
  • Freelancer sites: visitors see outcomes before opening the full case study
  • Dark editorial pages: the whole card is one link, giving one focus stop per project

Accessibility

Filters are real buttons with aria-pressed, grouped under an aria-label, and every change is announced through a visually hidden role="status" region. Results use a dl so each number is read together with its label. Hidden cards use the hidden attribute, so they leave the reading order and the Tab order. The stretched link gives one focus stop per card, and :has(.acs-link:focus-visible) draws a lime ring around the whole card. Images have descriptive alt text, light grey text on near-black keeps contrast high, and hover zoom and entrance motion are removed under prefers-reduced-motion: reduce.

Usage notes

The project photos come from Unsplash and are placeholders; replace them with your own work and update the alt text, links and figures.

Agency Case Study Grid with Images at a glance

Framework
Tailwind CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Tailwind CSS
Layout
Responsive, works on mobile, dark design
Category
Portfolios
License
Free for personal and commercial use

Questions about this template

Can I use the Agency Case Study Grid with Images code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Tailwind CSS from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

  • <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.

Agency Case Study Grid with Images – Tailwind CSS portfolios component screenshot
Agency Case Study Grid with Images · Tailwind CSS Portfolios

More Portfolios

Photographer Portfolio with Photo Grid – Bootstrap 5 portfolios preview

Photographer Portfolio with Photo Grid

Dark Bootstrap 5 photographer portfolio with subject filters, a full-bleed dense photo grid with wide and tall tiles, hover captions and a modal lightbox.

Bootstrap 5 Portfolios
Developer Portfolio Page – Tailwind CSS portfolios preview

Developer Portfolio Page

One-page Tailwind CSS developer portfolio with sticky mobile menu, hero stats, filterable project grid, experience timeline and a validated contact form.

Tailwind CSS Portfolios