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

285

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.3k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

8 months ago

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

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

891
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

1k
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.4k
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
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

1 week ago

27
gallary
html , css

Author:
Hacker Development

8 months ago

732
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.5k
Yvette
nice

Author:
Umutoniwase Yvette

7 months ago

718

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components