22 Tailwind CSS Image Carousel
10 / 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 Magazine Split-Screen Article Slider

A featured-article slider split down the middle: photograph on one side, headline and excerpt on the other, stacking to one column on mobile. The layout is a two-column grid; the state is one :has() condition per story.

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-10 w-full min-h-svh grid place-items-center bg-tcar10-bg font-tcar10-serif px-5 py-10" aria-label="Featured articles">
  <div class="group w-[min(880px,100%)]">
    <input type="radio" name="tcar-10" id="tcar-10-1" class="sr-only" checked>
    <input type="radio" name="tcar-10" id="tcar-10-2" class="sr-only">
    <input type="radio" name="tcar-10" id="tcar-10-3" class="sr-only">
    <div class="relative bg-white border border-tcar10-edge rounded-md overflow-hidden shadow-[0_24px_50px_-34px_oklch(0.4_0.06_60/0.6)] sm:min-h-[340px]">
      <article class="hidden sm:grid sm:absolute sm:inset-0 grid-cols-1 sm:grid-cols-[1.1fr_1fr] opacity-0 pointer-events-none transition-opacity duration-500 group-has-[#tcar-10-1:checked]:grid group-has-[#tcar-10-1:checked]:opacity-100 group-has-[#tcar-10-1:checked]:pointer-events-auto motion-reduce:transition-none">
        <div class="overflow-hidden bg-tcar10-ph max-sm:aspect-[16/10]"><img src="https://picsum.photos/seed/mag-1/900/700" width="900" height="700" decoding="async" alt="Aerial view of a coastal city" class="size-full object-cover block"></div>
        <div class="p-[clamp(22px,4vw,44px)] flex flex-col justify-center">
          <span class="font-tcar10-sans text-[11px] tracking-[0.18em] uppercase text-tcar10-acc font-bold mb-3">City Guide</span>
          <h3 class="text-[clamp(22px,3.4vw,30px)] leading-[1.16] text-tcar10-ink mb-3.5 text-balance">48 hours in Lisbon, off the tourist trail</h3>
          <p class="text-[15px] leading-relaxed text-tcar10-mute mb-5">Where locals actually eat, drink and swim &mdash; a slower map of the city's seven hills.</p>
          <a href="#" class="font-tcar10-sans text-[13px] font-bold text-tcar10-ink no-underline border-b-2 border-tcar10-acc self-start pb-0.5 focus-visible:outline-2 focus-visible:outline-tcar10-acc focus-visible:outline-offset-4">Read story &rarr;</a>
        </div>
      </article>
      <article class="hidden sm:grid sm:absolute sm:inset-0 grid-cols-1 sm:grid-cols-[1.1fr_1fr] opacity-0 pointer-events-none transition-opacity duration-500 group-has-[#tcar-10-2:checked]:grid group-has-[#tcar-10-2:checked]:opacity-100 group-has-[#tcar-10-2:checked]:pointer-events-auto motion-reduce:transition-none">
        <div class="overflow-hidden bg-tcar10-ph max-sm:aspect-[16/10]"><img src="https://picsum.photos/seed/mag-2/900/700" width="900" height="700" loading="lazy" decoding="async" alt="Studio workspace with plants" class="size-full object-cover block"></div>
        <div class="p-[clamp(22px,4vw,44px)] flex flex-col justify-center">
          <span class="font-tcar10-sans text-[11px] tracking-[0.18em] uppercase text-tcar10-acc font-bold mb-3">Workspaces</span>
          <h3 class="text-[clamp(22px,3.4vw,30px)] leading-[1.16] text-tcar10-ink mb-3.5 text-balance">The quiet rise of the two-hour workday</h3>
          <p class="text-[15px] leading-relaxed text-tcar10-mute mb-5">Deep-work rituals from designers who ship more by doing less, on purpose.</p>
          <a href="#" class="font-tcar10-sans text-[13px] font-bold text-tcar10-ink no-underline border-b-2 border-tcar10-acc self-start pb-0.5 focus-visible:outline-2 focus-visible:outline-tcar10-acc focus-visible:outline-offset-4">Read story &rarr;</a>
        </div>
      </article>
      <article class="hidden sm:grid sm:absolute sm:inset-0 grid-cols-1 sm:grid-cols-[1.1fr_1fr] opacity-0 pointer-events-none transition-opacity duration-500 group-has-[#tcar-10-3:checked]:grid group-has-[#tcar-10-3:checked]:opacity-100 group-has-[#tcar-10-3:checked]:pointer-events-auto motion-reduce:transition-none">
        <div class="overflow-hidden bg-tcar10-ph max-sm:aspect-[16/10]"><img src="https://picsum.photos/seed/mag-3/900/700" width="900" height="700" loading="lazy" decoding="async" alt="Close-up of ceramic bowls" class="size-full object-cover block"></div>
        <div class="p-[clamp(22px,4vw,44px)] flex flex-col justify-center">
          <span class="font-tcar10-sans text-[11px] tracking-[0.18em] uppercase text-tcar10-acc font-bold mb-3">Craft</span>
          <h3 class="text-[clamp(22px,3.4vw,30px)] leading-[1.16] text-tcar10-ink mb-3.5 text-balance">Why handmade ceramics are having a moment</h3>
          <p class="text-[15px] leading-relaxed text-tcar10-mute mb-5">A generation trading screens for clay, and the studios teaching them how.</p>
          <a href="#" class="font-tcar10-sans text-[13px] font-bold text-tcar10-ink no-underline border-b-2 border-tcar10-acc self-start pb-0.5 focus-visible:outline-2 focus-visible:outline-tcar10-acc focus-visible:outline-offset-4">Read story &rarr;</a>
        </div>
      </article>
    </div>
    <div class="flex justify-center mt-2">
      <label for="tcar-10-1" aria-label="Story 1" class="group/dot size-11 grid place-items-center cursor-pointer"><span class="size-[11px] rounded-full bg-tcar10-dot transition-[scale,background-color] duration-200 group-hover/dot:bg-tcar10-dothover group-has-[#tcar-10-1:checked]:bg-tcar10-acc group-has-[#tcar-10-1:checked]:scale-[1.3] group-has-[#tcar-10-1:focus-visible]:outline-3 group-has-[#tcar-10-1:focus-visible]:outline-tcar10-acc group-has-[#tcar-10-1:focus-visible]:outline-offset-[3px] motion-reduce:transition-none"></span></label>
      <label for="tcar-10-2" aria-label="Story 2" class="group/dot size-11 grid place-items-center cursor-pointer"><span class="size-[11px] rounded-full bg-tcar10-dot transition-[scale,background-color] duration-200 group-hover/dot:bg-tcar10-dothover group-has-[#tcar-10-2:checked]:bg-tcar10-acc group-has-[#tcar-10-2:checked]:scale-[1.3] group-has-[#tcar-10-2:focus-visible]:outline-3 group-has-[#tcar-10-2:focus-visible]:outline-tcar10-acc group-has-[#tcar-10-2:focus-visible]:outline-offset-[3px] motion-reduce:transition-none"></span></label>
      <label for="tcar-10-3" aria-label="Story 3" class="group/dot size-11 grid place-items-center cursor-pointer"><span class="size-[11px] rounded-full bg-tcar10-dot transition-[scale,background-color] duration-200 group-hover/dot:bg-tcar10-dothover group-has-[#tcar-10-3:checked]:bg-tcar10-acc group-has-[#tcar-10-3:checked]:scale-[1.3] group-has-[#tcar-10-3:focus-visible]:outline-3 group-has-[#tcar-10-3:focus-visible]:outline-tcar10-acc group-has-[#tcar-10-3:focus-visible]:outline-offset-[3px] motion-reduce:transition-none"></span></label>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tcar10-bg: #f7f3ec;
  --color-tcar10-bg: oklch(0.96 0.012 80);
  --color-tcar10-edge: #e6ddce;
  --color-tcar10-edge: oklch(0.9 0.018 80);
  --color-tcar10-ph: #e9e0d0;
  --color-tcar10-ph: oklch(0.91 0.02 80);
  --color-tcar10-ink: #241d15;
  --color-tcar10-ink: oklch(0.24 0.018 60);
  --color-tcar10-mute: #5c5040;
  --color-tcar10-mute: oklch(0.45 0.022 70);
  --color-tcar10-dot: #d8ccb8;
  --color-tcar10-dot: oklch(0.86 0.025 80);
  --color-tcar10-dothover: #b7a68b;
  --color-tcar10-dothover: oklch(0.73 0.035 80);
  --color-tcar10-acc: #a8362a;
  --color-tcar10-acc: oklch(0.48 0.16 28);
  --font-tcar10-serif: 'Newsreader', Georgia, serif;
  --font-tcar10-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.tcar-10 ::selection {
  background: var(--color-tcar10-acc);
  color: #fff;
}

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-tcar10-bg: #f7f3ec;
  --color-tcar10-bg: oklch(0.96 0.012 80);
  --color-tcar10-edge: #e6ddce;
  --color-tcar10-edge: oklch(0.9 0.018 80);
  --color-tcar10-ph: #e9e0d0;
  --color-tcar10-ph: oklch(0.91 0.02 80);
  --color-tcar10-ink: #241d15;
  --color-tcar10-ink: oklch(0.24 0.018 60);
  --color-tcar10-mute: #5c5040;
  --color-tcar10-mute: oklch(0.45 0.022 70);
  --color-tcar10-dot: #d8ccb8;
  --color-tcar10-dot: oklch(0.86 0.025 80);
  --color-tcar10-dothover: #b7a68b;
  --color-tcar10-dothover: oklch(0.73 0.035 80);
  --color-tcar10-acc: #a8362a;
  --color-tcar10-acc: oklch(0.48 0.16 28);
  --font-tcar10-serif: 'Newsreader', Georgia, serif;
  --font-tcar10-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.tcar-10 ::selection {
  background: var(--color-tcar10-acc);
  color: #fff;
}
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,400;6..72,600;6..72,700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap">

What changed in the port

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

  • pointer-events-none must travel with opacity-0. Tailwind makes the pairing visible in the class list, which is exactly where you want to notice it missing — the CSS version hid the same pairing in two different rules eighty lines apart.
  • The mobile branch flips from absolute stacking to document flow using hidden sm:grid sm:absolute plus a group-has-[...]:grid. It is the most variant-dense line in the collection and the one place where a plain media query would honestly be easier to read.
  • UI change from the CSS original: each dot label is now a 44px box with the 11px dot centred inside it, the excerpt grey darkened from #665a4a to oklch(0.45 0.022 70), and the read-more link gained a focus ring the original never had.
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 Magazine Split-Screen Article Slider
Source: https://codefronts.com/snippets/tailwind-css-image-carousel/tailwind-magazine-split-screen-article-slider/

A featured-article slider split down the middle: photograph on one side, headline and excerpt on the other, stacking to one column on mobile. The layout is a two-column grid; the state is one :has() condition per story.
## HTML
```html
<section class="tcar-10 w-full min-h-svh grid place-items-center bg-tcar10-bg font-tcar10-serif px-5 py-10" aria-label="Featured articles">
  <div class="group w-[min(880px,100%)]">
    <input type="radio" name="tcar-10" id="tcar-10-1" class="sr-only" checked>
    <input type="radio" name="tcar-10" id="tcar-10-2" class="sr-only">
    <input type="radio" name="tcar-10" id="tcar-10-3" class="sr-only">
    <div class="relative bg-white border border-tcar10-edge rounded-md overflow-hidden shadow-[0_24px_50px_-34px_oklch(0.4_0.06_60/0.6)] sm:min-h-[340px]">
      <article class="hidden sm:grid sm:absolute sm:inset-0 grid-cols-1 sm:grid-cols-[1.1fr_1fr] opacity-0 pointer-events-none transition-opacity duration-500 group-has-[#tcar-10-1:checked]:grid group-has-[#tcar-10-1:checked]:opacity-100 group-has-[#tcar-10-1:checked]:pointer-events-auto motion-reduce:transition-none">
        <div class="overflow-hidden bg-tcar10-ph max-sm:aspect-[16/10]"><img src="https://picsum.photos/seed/mag-1/900/700" width="900" height="700" decoding="async" alt="Aerial view of a coastal city" class="size-full object-cover block"></div>
        <div class="p-[clamp(22px,4vw,44px)] flex flex-col justify-center">
          <span class="font-tcar10-sans text-[11px] tracking-[0.18em] uppercase text-tcar10-acc font-bold mb-3">City Guide</span>
          <h3 class="text-[clamp(22px,3.4vw,30px)] leading-[1.16] text-tcar10-ink mb-3.5 text-balance">48 hours in Lisbon, off the tourist trail</h3>
          <p class="text-[15px] leading-relaxed text-tcar10-mute mb-5">Where locals actually eat, drink and swim &mdash; a slower map of the city's seven hills.</p>
          <a href="#" class="font-tcar10-sans text-[13px] font-bold text-tcar10-ink no-underline border-b-2 border-tcar10-acc self-start pb-0.5 focus-visible:outline-2 focus-visible:outline-tcar10-acc focus-visible:outline-offset-4">Read story &rarr;</a>
        </div>
      </article>
      <article class="hidden sm:grid sm:absolute sm:inset-0 grid-cols-1 sm:grid-cols-[1.1fr_1fr] opacity-0 pointer-events-none transition-opacity duration-500 group-has-[#tcar-10-2:checked]:grid group-has-[#tcar-10-2:checked]:opacity-100 group-has-[#tcar-10-2:checked]:pointer-events-auto motion-reduce:transition-none">
        <div class="overflow-hidden bg-tcar10-ph max-sm:aspect-[16/10]"><img src="https://picsum.photos/seed/mag-2/900/700" width="900" height="700" loading="lazy" decoding="async" alt="Studio workspace with plants" class="size-full object-cover block"></div>
        <div class="p-[clamp(22px,4vw,44px)] flex flex-col justify-center">
          <span class="font-tcar10-sans text-[11px] tracking-[0.18em] uppercase text-tcar10-acc font-bold mb-3">Workspaces</span>
          <h3 class="text-[clamp(22px,3.4vw,30px)] leading-[1.16] text-tcar10-ink mb-3.5 text-balance">The quiet rise of the two-hour workday</h3>
          <p class="text-[15px] leading-relaxed text-tcar10-mute mb-5">Deep-work rituals from designers who ship more by doing less, on purpose.</p>
          <a href="#" class="font-tcar10-sans text-[13px] font-bold text-tcar10-ink no-underline border-b-2 border-tcar10-acc self-start pb-0.5 focus-visible:outline-2 focus-visible:outline-tcar10-acc focus-visible:outline-offset-4">Read story &rarr;</a>
        </div>
      </article>
      <article class="hidden sm:grid sm:absolute sm:inset-0 grid-cols-1 sm:grid-cols-[1.1fr_1fr] opacity-0 pointer-events-none transition-opacity duration-500 group-has-[#tcar-10-3:checked]:grid group-has-[#tcar-10-3:checked]:opacity-100 group-has-[#tcar-10-3:checked]:pointer-events-auto motion-reduce:transition-none">
        <div class="overflow-hidden bg-tcar10-ph max-sm:aspect-[16/10]"><img src="https://picsum.photos/seed/mag-3/900/700" width="900" height="700" loading="lazy" decoding="async" alt="Close-up of ceramic bowls" class="size-full object-cover block"></div>
        <div class="p-[clamp(22px,4vw,44px)] flex flex-col justify-center">
          <span class="font-tcar10-sans text-[11px] tracking-[0.18em] uppercase text-tcar10-acc font-bold mb-3">Craft</span>
          <h3 class="text-[clamp(22px,3.4vw,30px)] leading-[1.16] text-tcar10-ink mb-3.5 text-balance">Why handmade ceramics are having a moment</h3>
          <p class="text-[15px] leading-relaxed text-tcar10-mute mb-5">A generation trading screens for clay, and the studios teaching them how.</p>
          <a href="#" class="font-tcar10-sans text-[13px] font-bold text-tcar10-ink no-underline border-b-2 border-tcar10-acc self-start pb-0.5 focus-visible:outline-2 focus-visible:outline-tcar10-acc focus-visible:outline-offset-4">Read story &rarr;</a>
        </div>
      </article>
    </div>
    <div class="flex justify-center mt-2">
      <label for="tcar-10-1" aria-label="Story 1" class="group/dot size-11 grid place-items-center cursor-pointer"><span class="size-[11px] rounded-full bg-tcar10-dot transition-[scale,background-color] duration-200 group-hover/dot:bg-tcar10-dothover group-has-[#tcar-10-1:checked]:bg-tcar10-acc group-has-[#tcar-10-1:checked]:scale-[1.3] group-has-[#tcar-10-1:focus-visible]:outline-3 group-has-[#tcar-10-1:focus-visible]:outline-tcar10-acc group-has-[#tcar-10-1:focus-visible]:outline-offset-[3px] motion-reduce:transition-none"></span></label>
      <label for="tcar-10-2" aria-label="Story 2" class="group/dot size-11 grid place-items-center cursor-pointer"><span class="size-[11px] rounded-full bg-tcar10-dot transition-[scale,background-color] duration-200 group-hover/dot:bg-tcar10-dothover group-has-[#tcar-10-2:checked]:bg-tcar10-acc group-has-[#tcar-10-2:checked]:scale-[1.3] group-has-[#tcar-10-2:focus-visible]:outline-3 group-has-[#tcar-10-2:focus-visible]:outline-tcar10-acc group-has-[#tcar-10-2:focus-visible]:outline-offset-[3px] motion-reduce:transition-none"></span></label>
      <label for="tcar-10-3" aria-label="Story 3" class="group/dot size-11 grid place-items-center cursor-pointer"><span class="size-[11px] rounded-full bg-tcar10-dot transition-[scale,background-color] duration-200 group-hover/dot:bg-tcar10-dothover group-has-[#tcar-10-3:checked]:bg-tcar10-acc group-has-[#tcar-10-3:checked]:scale-[1.3] group-has-[#tcar-10-3:focus-visible]:outline-3 group-has-[#tcar-10-3:focus-visible]:outline-tcar10-acc group-has-[#tcar-10-3:focus-visible]:outline-offset-[3px] motion-reduce:transition-none"></span></label>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcar10-bg: #f7f3ec;
  --color-tcar10-bg: oklch(0.96 0.012 80);
  --color-tcar10-edge: #e6ddce;
  --color-tcar10-edge: oklch(0.9 0.018 80);
  --color-tcar10-ph: #e9e0d0;
  --color-tcar10-ph: oklch(0.91 0.02 80);
  --color-tcar10-ink: #241d15;
  --color-tcar10-ink: oklch(0.24 0.018 60);
  --color-tcar10-mute: #5c5040;
  --color-tcar10-mute: oklch(0.45 0.022 70);
  --color-tcar10-dot: #d8ccb8;
  --color-tcar10-dot: oklch(0.86 0.025 80);
  --color-tcar10-dothover: #b7a68b;
  --color-tcar10-dothover: oklch(0.73 0.035 80);
  --color-tcar10-acc: #a8362a;
  --color-tcar10-acc: oklch(0.48 0.16 28);
  --font-tcar10-serif: 'Newsreader', Georgia, serif;
  --font-tcar10-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

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

.tcar-10 ::selection {
  background: var(--color-tcar10-acc);
  color: #fff;
}
```

How this works

Opacity alone is not enough. A faded-out slide still intercepts clicks, so every slide pairs opacity-0 pointer-events-none with group-has-[...]:opacity-100 group-has-[...]:pointer-events-auto. Forgetting the second pair is the classic stacked-slider bug: the top slide's links are unclickable.

The stage holds its height. min-h-[340px] on the container plus absolutely-positioned slides means the fade between a short and a long excerpt does not resize the box.

Mobile drops the absolute stacking. At the narrow end the slide becomes relative in normal flow and inactive ones are hidden, which lets the card grow to whatever the story needs instead of being clipped by a desktop-sized stage.

Make it yours

  • Flip the image side per story with sm:[grid-template-columns:1fr_1.1fr] and order-*.
  • Add a story: one radio, one article, one dot, each with its own #tcar-10-4 condition.
  • Slide-in instead of fade: animate translate-x under the same condition.
  • Rule colour under the read-more link: --color-tcar10-acc.

Gotchas — read before shipping

  • Headlines must stay real <h3> text. A headline baked into the photograph is invisible to search and to screen readers, which defeats the point of an editorial hero.
  • Every dot needs an aria-label ("Story 2"); an empty label is an unnamed control.
  • Lock the stage height, or the cross-fade between differently-sized text blocks jumps the page.
  • A 44px hit area built from before:-inset-3 is wider than the 10px gap between dots, so the boxes overlap and the last dot captures the clicks. Make the label itself 44px instead.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() drives the state map (Chrome 105+, Safari 15.4+, Firefox 121+); CSS grid is universal. The floor quoted is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗gridtw ↗:focus-visibletw ↗transitionstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →