Home
Omer fils ELENGA
Avant & Après

Avant & Après

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

Header Image gallery Range Slider

Author Omer fils ELENGA

189

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

Author:
Abhiraj

11 months ago

2.2k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

7 months ago

1k
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.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

932
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.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

800
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.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

851
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.

Author:
Nicole Shalom

7 months ago

1.3k
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."

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.4k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

2 years ago

60.6k
Hero Section
Hero section design concept

Author:
Raul antonio de la cruz hernandez

4 weeks ago

129
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.9k
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

1 year ago

1.7k
Simple range slider

Author:
Nour Haider

2 years ago

15.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components