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

400

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

1 year ago

2.5k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

10 months ago

1.3k
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)

10 months ago

1.3k
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)

10 months ago

969
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)

10 months ago

1.2k
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

9 months ago

1.7k
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)

9 months ago

1.6k
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

2 months ago

166
Galerie Interactive
Galerie Interactive

Author:
Omer fils ELENGA

2 months ago

75
card section neon
card section neon

Author:
Omer fils ELENGA

1 month ago

274
ULTIMATE SNAKE
(click to https://quantum-snake.netlify.app/ )ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Heade With Hero Section

Author:
Abdul Baset Bappy

9 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components