22 Tailwind CSS Image Carousel
19 / 22

All 22 in 22 Tailwind CSS Image Carousel

  1. 01Tailwind E-commerce Product Gallery Carousel with Thumbnails
  2. 02Tailwind Shop the Look Multi-Item Card Slider with Scroll Snap
  3. 03Tailwind Infinite Logo Scroller Marquee with No JavaScript
  4. 04Tailwind Product Colour Variant Picker Slider
  5. 05Tailwind Full-Screen Hero Slideshow with Auto Cross-Fade
  6. 06Tailwind Testimonial Card Carousel with Star Ratings
  7. 07Tailwind Meet the Team Profile Slider with Circular Portraits
  8. 08Tailwind Portfolio Gallery Slider with Hover Caption Reveal
  9. 09Tailwind Netflix-Style Content Row Carousel with Hover Expand
  10. 10Tailwind Magazine Split-Screen Article Slider
  11. 11Tailwind Onboarding Slider with Native CSS Scroll-Marker Dots
  12. 12Tailwind Vertical Image Carousel with Y-Axis Scroll Snap
  13. 13Tailwind 3D Coverflow Carousel with Perspective Transforms
  14. 14Tailwind Cross-Fade Image Slideshow with Manual Controls
  15. 15Tailwind Dual Opposite-Direction Marquee Slider
  16. 16Tailwind Dot Pagination Carousel with Target and Has Selectors
  17. 17Tailwind Prev / Next Arrow Carousel with Native Scroll Buttons
  18. 18Tailwind Before / After Image Comparison Slider
  19. 19Tailwind Accordion Expanding Image Panel Carousel
  20. 20Tailwind Autoplay Slider with Keyframe Track and Progress Bars
  21. 21Tailwind Zoom-on-Hover Image Gallery Slider
  22. 22Tailwind Parallax Text-Over-Image Story Slider
Pure TailwindMIT licensed

Tailwind Accordion Expanding Image Panel Carousel

A row of tall panels where hovering or focusing one expands it wide while the others shrink to slivers. The only demo in the collection that deliberately animates a layout property — flex-grow — because there is no transform that produces this push-and-pull.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tcar-19 w-full min-h-svh grid place-items-center bg-tcar19-bg font-tcar19-sans px-5 py-10" aria-label="Expanding image panels">
  <ul class="list-none flex gap-2.5 w-[min(820px,100%)] h-[min(440px,70svh)] m-0 p-0">
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-1/700/900" width="700" height="900" decoding="async" alt="Modernist villa" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Villa Sereno</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">Coastal retreat</small></span>
      </a>
    </li>
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-2/700/900" width="700" height="900" loading="lazy" decoding="async" alt="Loft interior" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Union Loft</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">City living</small></span>
      </a>
    </li>
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-3/700/900" width="700" height="900" loading="lazy" decoding="async" alt="Cabin in the woods" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Pine Cabin</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">Forest escape</small></span>
      </a>
    </li>
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-4/700/900" width="700" height="900" loading="lazy" decoding="async" alt="Desert house" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Dune House</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">Desert calm</small></span>
      </a>
    </li>
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-5/700/900" width="700" height="900" loading="lazy" decoding="async" alt="Lakeside home" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Still Water</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">Lakeside</small></span>
      </a>
    </li>
  </ul>
</section>
@import "tailwindcss";

@theme {
  --color-tcar19-bg: #17140f;
  --color-tcar19-bg: oklch(0.19 0.012 75);
  --color-tcar19-tile: #221d16;
  --color-tcar19-tile: oklch(0.24 0.015 75);
  --color-tcar19-cap: #f0dcb4;
  --color-tcar19-cap: oklch(0.89 0.06 85);
  --color-tcar19-acc: #d97706;
  --color-tcar19-acc: oklch(0.67 0.16 60);
  --font-tcar19-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tcar19-serif: 'Newsreader', Georgia, serif;
}

.tcar-19 {
  width: 100%;
  min-height: 100svh;
}

.tcar-19 ::selection {
  background: var(--color-tcar19-acc);
  color: #1a1208;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

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

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tcar19-bg: #17140f;
  --color-tcar19-bg: oklch(0.19 0.012 75);
  --color-tcar19-tile: #221d16;
  --color-tcar19-tile: oklch(0.24 0.015 75);
  --color-tcar19-cap: #f0dcb4;
  --color-tcar19-cap: oklch(0.89 0.06 85);
  --color-tcar19-acc: #d97706;
  --color-tcar19-acc: oklch(0.67 0.16 60);
  --font-tcar19-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tcar19-serif: 'Newsreader', Georgia, serif;
}

.tcar-19 {
  width: 100%;
  min-height: 100svh;
}

.tcar-19 ::selection {
  background: var(--color-tcar19-acc);
  color: #1a1208;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • grow / hover:grow-[5] is a rare case of a Tailwind utility making a questionable technique look innocuous. It is the right technique for this pattern, but the class list gives no hint that it reflows every frame — hence the gotcha.
  • min-w-0 is the utility this demo cannot exist without, and it is the easiest one to forget because nothing visibly references it.
  • UI change from the CSS original: the caption's sub-line lightened from #e9d3a8 to oklch(0.89 0.06 85) and the panel names moved to the serif face. At 12.5px over a brightened photograph the original sub-line was the weakest text in the whole collection.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Accordion Expanding Image Panel Carousel
Source: https://codefronts.com/snippets/tailwind-css-image-carousel/tailwind-accordion-expanding-image-panel-carousel/

A row of tall panels where hovering or focusing one expands it wide while the others shrink to slivers. The only demo in the collection that deliberately animates a layout property — flex-grow — because there is no transform that produces this push-and-pull.
## HTML
```html
<section class="tcar-19 w-full min-h-svh grid place-items-center bg-tcar19-bg font-tcar19-sans px-5 py-10" aria-label="Expanding image panels">
  <ul class="list-none flex gap-2.5 w-[min(820px,100%)] h-[min(440px,70svh)] m-0 p-0">
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-1/700/900" width="700" height="900" decoding="async" alt="Modernist villa" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Villa Sereno</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">Coastal retreat</small></span>
      </a>
    </li>
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-2/700/900" width="700" height="900" loading="lazy" decoding="async" alt="Loft interior" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Union Loft</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">City living</small></span>
      </a>
    </li>
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-3/700/900" width="700" height="900" loading="lazy" decoding="async" alt="Cabin in the woods" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Pine Cabin</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">Forest escape</small></span>
      </a>
    </li>
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-4/700/900" width="700" height="900" loading="lazy" decoding="async" alt="Desert house" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Dune House</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">Desert calm</small></span>
      </a>
    </li>
    <li class="group grow basis-0 min-w-0 transition-[flex-grow] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:grow-[5] focus-within:grow-[5] motion-reduce:transition-none">
      <a href="#" class="relative block h-full rounded-[14px] overflow-hidden no-underline bg-tcar19-tile focus-visible:outline-3 focus-visible:outline-tcar19-acc focus-visible:outline-offset-2">
        <img src="https://picsum.photos/seed/acc-5/700/900" width="700" height="900" loading="lazy" decoding="async" alt="Lakeside home" class="size-full object-cover block brightness-[0.72] transition-[filter] duration-500 group-hover:brightness-100 group-focus-within:brightness-100 motion-reduce:transition-none">
        <span class="absolute left-4 bottom-4 right-4 text-white whitespace-nowrap opacity-0 translate-y-2.5 transition-[opacity,translate] duration-400 delay-100 group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-none"><b class="block text-lg font-tcar19-serif">Still Water</b><small class="block text-[12.5px] text-tcar19-cap mt-0.5">Lakeside</small></span>
      </a>
    </li>
  </ul>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcar19-bg: #17140f;
  --color-tcar19-bg: oklch(0.19 0.012 75);
  --color-tcar19-tile: #221d16;
  --color-tcar19-tile: oklch(0.24 0.015 75);
  --color-tcar19-cap: #f0dcb4;
  --color-tcar19-cap: oklch(0.89 0.06 85);
  --color-tcar19-acc: #d97706;
  --color-tcar19-acc: oklch(0.67 0.16 60);
  --font-tcar19-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tcar19-serif: 'Newsreader', Georgia, serif;
}

.tcar-19 {
  width: 100%;
  min-height: 100svh;
}

.tcar-19 ::selection {
  background: var(--color-tcar19-acc);
  color: #1a1208;
}
```

How this works

Layout animation, on purpose. flex-grow is a layout property and animating it costs a reflow per frame. That is the established technique for this pattern and there is no transform equivalent, so the honest answer is to use it, keep the panel count modest and say so.

Focus expands the same panel hover does. Each panel wraps a real link and carries focus-within:grow-[5], so tabbing through opens each panel in turn.

Two things move together. The image brightens while the caption slides up, both from the same group on the panel, with the caption delayed 100ms so the reveal reads as a consequence of the expansion.

Make it yours

  • Expansion ratio: hover:grow-[5] — 3 is restrained, 8 is dramatic.
  • Row height: h-[min(440px,70svh)].
  • Caption content and direction, per panel.
  • Focus ring colour: --color-tcar19-acc.

Gotchas — read before shipping

  • min-w-0 on every panel. Flex items default to min-width:auto, which means their image content refuses to shrink and no panel ever collapses.
  • focus-within: is not optional — without it the panels are hover-only and keyboard users see five identical slivers.
  • Test on a low-end device. Five panels reflowing at 60fps is fine; twenty is not.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Flexbox and :focus-within are universally supported; the floor quoted is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

flexboxtw ↗:focus-withintw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →