Avant & Après

This tailwind example is contributed by Omer fils ELENGA, on 30-Nov-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid

Header Image gallery Range Slider

Author Omer fils ELENGA

Tailwind v3.4 890 3

Fork Fullscreen

<link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />

/* Style personnalisé pour le slider Avant/Après */
    .compare-slider {
      position: relative;
      display: block;
      width: 100%;
      max-width: 768px;
      height: auto;
      margin: 0 auto;
    }
    .compare-before {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      overflow: hidden;
      border-radius: 0.75rem;
      pointer-events: none;
    }
    .compare-before img {
      width: 200%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .compare-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      background: rgba(255, 255, 255, 0.8);
      cursor: ew-resize;
      transform: translateX(-50%);
      z-index: 10;
    }
    .compare-handle::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .compare-handle::before svg {
      width: 16px;
      height: 16px;
      color: #333;
    }
  </style>
    
    
            <section class="flex flex-col gap-4 px-4 py-10">
              <div class="text-center max-w-2xl mx-auto">
                <h2 class="text-[#0c141d] dark:text-slate-50 text-3xl font-bold">Nos Résultats : Avant &amp; Après</h2>
                <p class="text-slate-700 dark:text-slate-300 mt-2">
                  Voyez la différence que notre expertise peut faire. Nous transformons les espaces infestés en environnements propres et sûrs.
                </p>
              </div>

<div class="compare-slider" id="compareSlider">
                <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuALlkx-IObwjMGna31eLEFzEHeD0qTM1jHGm5S-McRZvZIS7YAaAcBgKe_bg0p8JLLeycTYMb15ESdXFjv33aqtMkd1F1x0KTbcwJhXWyVf4gnFEV7sTtSKTgYX-hvZyxNbT_z6JjyDeDBzqLr2CqxJlbhSiV1l-VTQ-RatYXgUG7zxe3InOdgXgFVb25_fLf2SiMb2yqDWiENEpHV6NmdXbTThxWNIUDSYszLhUOLGYkw0rFCHypqGQCFPzFAMX8Q_cRLGdqMex8M" alt="Après désinfection – cuisine propre et saine" class="w-full rounded-xl" />
                <div class="compare-before" id="compareBefore">
                  <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuA5Q8F7AEduUTC-RyyhnMAg5lVaVU0STX1wR0g02O-qe_LPcXQ0cumksZsj2vuS0HH7jZhs_hNc2_Fw-yJ9JCmgWxcuvgFf4VO0XbX6w_7-svqucVT9IhcHwtX1_fqq7WTxpV3mllwEE1gB8kGhKXgYc4_sNJjT1HmbCOfmdStfxWUYHwiAAtBf8e4A9WP_munuiHi-sSTrEJ5BLeZL_yltx7AMbyK3Mq5Hk1HRsrxfzeH9PRc91GoToEz55xpCe9MTYQ2ttnr6REw" alt="Avant traitement – coin de cuisine infesté" />
                </div>
                <div class="compare-handle" id="compareHandle">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M8 9l4-4 4 4m0 6l-4 4-4-4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
              </div>
            </section>

<script>
      document.addEventListener('DOMContentLoaded', () => {
        const slider = document.getElementById('compareSlider');
        const before = document.getElementById('compareBefore');
        const handle = document.getElementById('compareHandle');

if (!slider) return;

let isActive = false;

const onMouseDown = (e) => {
          isActive = true;
          updatePosition(e.clientX);
        };

const onMouseMove = (e) => {
          if (!isActive) return;
          e.preventDefault();
          updatePosition(e.clientX);
        };

const onMouseUp = () => {
          isActive = false;
        };

const onTouchMove = (e) => {
          if (!isActive) return;
          e.preventDefault();
          updatePosition(e.touches[0].clientX);
        };

handle.addEventListener('mousedown', onMouseDown);
        window.addEventListener('mousemove', onMouseMove);
        window.addEventListener('mouseup', onMouseUp);

handle.addEventListener('touchstart', (e) => {
          isActive = true;
          updatePosition(e.touches[0].clientX);
        });
        window.addEventListener('touchmove', onTouchMove);
        window.addEventListener('touchend', onMouseUp);
      });
    </script>

Related Examples

responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.1k
slider /carousel
simple slider or carousel

Omer fils ELENGA

1 year ago

1.7k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Nicole Shalom

1 year ago

2.2k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.9k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

8 months ago

629
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

930
Galerie Interactive
Galerie Interactive

Omer fils ELENGA

7 months ago

374
card section neon
card section neon

Omer fils ELENGA

7 months ago

1.3k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

227